feat(RadioGroup): new component (#730)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/3.forms/5.checkbox.md

@@ -38,7 +38,7 @@ props:
 
 ### Required
 
-Use the `required` prop to display a red star next to the label.
+Use the `required` prop to display a red star next to the label of the Checkbox.
 
 ::component-card
 ---

docs/content/3.forms/6.radio-group.md

@@ -0,0 +1,156 @@
+---
+title: RadioGroup
+description: Display a set of radio buttons.
+navigation:
+  badge: New
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/RadioGroup.vue
+---
+
+## Usage
+
+Use a `v-model` to make the RadioGroup reactive.
+
+:component-example{component="radio-group-example"}
+
+Alternatively, you can use individual Radio components:
+
+:component-example{component="radio-example"}
+
+### Legend
+
+Use the `legend` prop to add a legend to the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  legend: 'Legend'
+---
+::
+
+### Style
+
+Use the `color` prop to change the style of the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  color: 'primary'
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+This prop also work on the Radio component.
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  disabled: true
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+This prop also work on the Radio component.
+::
+
+### Label
+
+Use the `label` prop to display a label on the right of the Radio.
+
+::component-card{slug="radio"}
+---
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label of the Radio.
+
+::component-card{slug="radio"}
+---
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Radio.
+
+::component-card{slug="radio"}
+---
+props:
+  label: 'Label'
+  help: 'Please choose one'
+---
+::
+
+## Slots
+
+### `label`
+
+Use the `#label` slot to override the label of each option.
+
+:component-example{component="radio-group-label-example"}
+
+Alternatively, you can do the same with individual Radio:
+
+::component-card{slug="radio"}
+---
+slots:
+  label: <span class="italic">Label</span>
+---
+
+#label
+  [Label]{.italic}
+::
+
+### `legend`
+
+Use the `#legend` slot to override the content of the legend.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+slots:
+  legend: <span class="italic">Legend</span>
+---
+
+#legend
+  [Legend]{.italic}
+::
+
+## Props
+
+:component-props
+
+:u-divider{label="Radio" type="dashed" class="my-12"}
+
+:component-props{slug="radio"}
+
+## Preset
+
+:component-preset
+
+:component-preset{slug="radio"}

docs/content/3.forms/6.radio.md

@@ -1,98 +0,0 @@
----
-description: Display a radio field.
-links:
-  - label: GitHub
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Radio.vue
----
-
-## Usage
-
-Use a `v-model` to make the Radio reactive.
-
-:component-example{component="radio-example"}
-
-### Label
-
-Use the `label` prop to display a label on the right.
-
-::component-card
----
-props:
-  label: 'Label'
----
-::
-
-### Style
-
-Use the `color` prop to change the style of the Radio.
-
-::component-card
----
-baseProps:
-  label: 'Label'
-props:
-  color: 'primary'
----
-::
-
-### Required
-
-Use the `required` prop to display a red star next to the label.
-
-::component-card
----
-props:
-  label: 'Label'
-  required: true
----
-::
-
-### Help
-
-Use the `help` prop to display some text under the Radio.
-
-::component-card
----
-props:
-  label: 'Label'
-  help: 'Please choose one'
----
-::
-
-### Disabled
-
-Use the `disabled` prop to disable the Radio.
-
-::component-card
----
-baseProps:
-  label: 'Label'
-props:
-  disabled: true
----
-::
-
-## Slots
-
-### `label`
-
-Use the `#label` slot to override the content of the label.
-
-::component-card
----
-slots:
-  label: <span class="italic">Label</span>
----
-
-#label
-  [Label]{.italic}
-::
-
-## Props
-
-:component-props
-
-## Preset
-
-:component-preset