From a117d3dffc5b66463e7d344675d0d797628ff732 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Sat, 23 Sep 2023 13:08:51 +0200
Subject: [PATCH 01/12] feat(RadioGroup): new component

---
 .../content/examples/FormExampleElements.vue  |   8 ++
 .../content/examples/RadioExample.vue         |   7 +-
 docs/content/3.forms/6.radio.md               |  22 ++-
 src/runtime/components/forms/Radio.vue        |  20 +--
 src/runtime/components/forms/RadioGroup.vue   | 126 ++++++++++++++++++
 5 files changed, 156 insertions(+), 27 deletions(-)
 create mode 100644 src/runtime/components/forms/RadioGroup.vue

diff --git a/docs/components/content/examples/FormExampleElements.vue b/docs/components/content/examples/FormExampleElements.vue
index ea095f5624..2a81721a5e 100644
--- a/docs/components/content/examples/FormExampleElements.vue
+++ b/docs/components/content/examples/FormExampleElements.vue
@@ -17,6 +17,7 @@ const state = ref({
   checkbox: undefined,
   toggle: undefined,
   radio: undefined,
+  radioGroup: undefined,
   switch: undefined,
   range: undefined
 })
@@ -39,6 +40,9 @@ const schema = z.object({
   radio: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
+  radioGroup: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   range: z.number().max(20, { message: 'Must be less than 20' })
 })
 
@@ -83,6 +87,10 @@ async function submit (event: FormSubmitEvent<Schema>) {
       <UCheckbox v-model="state.checkbox" label="Check me" />
     </UFormGroup>
 
+    <UFormGroup name="radioGroup" label="Radio Group">
+      <URadioGroup v-model="state.radioGroup" :options="options" />
+    </UFormGroup>
+
     <UFormGroup name="radio" label="Radio">
       <URadio v-for="option in options" :key="option.value" v-model="state.radio" v-bind="option">
         {{ option.label }}
diff --git a/docs/components/content/examples/RadioExample.vue b/docs/components/content/examples/RadioExample.vue
index 157026f574..1482705cec 100644
--- a/docs/components/content/examples/RadioExample.vue
+++ b/docs/components/content/examples/RadioExample.vue
@@ -1,14 +1,11 @@
 <script setup>
-const methods = [{
-  name: 'email',
+const options = [{
   value: 'email',
   label: 'Email'
 }, {
-  name: 'sms',
   value: 'sms',
   label: 'Phone (SMS)'
 }, {
-  name: 'push',
   value: 'push',
   label: 'Push notification'
 }]
@@ -18,6 +15,6 @@ const selected = ref('sms')
 
 <template>
   <div class="space-y-1">
-    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+    <URadioGroup v-model="selected" :options="options" />
   </div>
 </template>
diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md
index e4d8f2067d..6ec844e7f0 100644
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio.md
@@ -17,25 +17,19 @@ Use a `v-model` to make the Radio reactive.
 #code
 ```vue
 <script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
+const options = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
 
 const selected = ref('sms')
 </script>
 
 <template>
-  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+  <div class="space-y-1">
+    <URadioGroup v-model="selected" :options="options" />
+  </div>
 </template>
 ```
 ::
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index b576c5b66a..42d4021c2e 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="inputId"
+        :id="id"
         v-model="pick"
         :name="name"
         :required="required"
@@ -15,7 +15,7 @@
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="inputId" :class="ui.label">
+      <label :for="id" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -27,11 +27,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
-import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
@@ -39,6 +38,7 @@ import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
 import colors from '#ui-colors'
 import { uid } from '../../utils/uid'
+import { useFormGroup } from '../../composables/useFormGroup'
 
 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 
@@ -94,11 +94,12 @@ export default defineComponent({
       default: undefined
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })
 
-    const { emitFormChange, color, name, inputId } = useFormGroup(props)
+    const radioGroup = inject('radio-group', null)
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
 
     const pick = computed({
       get () {
@@ -106,7 +107,9 @@ export default defineComponent({
       },
       set (value) {
         emit('update:modelValue', value)
-        if (value) {
+        emit('change', value)
+
+        if (!radioGroup) {
           emitFormChange()
         }
       }
@@ -125,10 +128,11 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      inputId,
       attrs,
       pick,
       // eslint-disable-next-line vue/no-dupe-keys
+      color,
+      // eslint-disable-next-line vue/no-dupe-keys
       name,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
new file mode 100644
index 0000000000..2a9168fab6
--- /dev/null
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -0,0 +1,126 @@
+<template>
+  <div :class="ui.wrapper">
+    <fieldset v-bind="attrs">
+      <URadio
+        v-for="option in normalizedOptions"
+        :key="option.value"
+        :label="option.label"
+        :model-value="option.value"
+        :checked="option.value === modelValue"
+        :disabled="disabled"
+        @change="onUpdate(option.value)"
+      >
+        <slot name="label" v-bind="{ option }" />
+      </URadio>
+    </fieldset>
+  </div>
+</template>
+
+<script lang="ts">
+import URadio from './Radio.vue'
+import { computed, defineComponent, provide } from 'vue'
+import type { PropType } from 'vue'
+import { useUI } from '../../composables/useUI'
+import { useFormGroup } from '../../composables/useFormGroup'
+import { mergeConfig, get } from '../../utils'
+import type { Strategy } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { radio } from '#ui/ui.config'
+import colors from '#ui-colors'
+
+const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.select, radio)
+
+export default defineComponent({
+  components: {
+    URadio
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number, Object],
+      default: ''
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionAttribute: {
+      type: String,
+      default: 'label'
+    },
+    valueAttribute: {
+      type: String,
+      default: 'value'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String as PropType<typeof colors[number]>,
+      default: () => config.default.color,
+      validator (value: string) {
+        return appConfig.ui.colors.includes(value)
+      }
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup (props, { emit }) {
+    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
+
+    const { emitFormChange, color, name } = useFormGroup(props, config)
+    provide('radio-group', { color, name })
+
+    const onUpdate = (value: any) => {
+      emit('update:modelValue', value)
+      emit('change', value)
+      emitFormChange()
+    }
+
+    const guessOptionValue = (option: any) => {
+      return get(option, props.valueAttribute, get(option, props.optionAttribute))
+    }
+
+    const guessOptionText = (option: any) => {
+      return get(option, props.optionAttribute, get(option, props.valueAttribute))
+    }
+
+    const normalizeOption = (option: any) => {
+      if (['string', 'number', 'boolean'].includes(typeof option)) {
+        return {
+          value: option,
+          label: option
+        }
+      }
+
+      return {
+        ...option,
+        value: guessOptionValue(option),
+        label: guessOptionText(option)
+      }
+    }
+
+    const normalizedOptions = computed(() => {
+      return props.options.map(option => normalizeOption(option))
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      normalizedOptions,
+      // eslint-disable-next-line vue/no-dupe-keys
+      onUpdate
+    }
+  }
+})
+</script>

From 48e5456a3bcfb8ec3cd7cfcd8f2463976156a29d Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Thu, 28 Sep 2023 11:44:31 +0200
Subject: [PATCH 02/12] chore(RadioGroup): cleanup

---
 .../content/examples/RadioExample.vue         |   7 +-
 .../content/examples/RadioGroupExample.vue    |  18 +++
 .../examples/RadioGroupLabelExample.vue       |  20 ++++
 docs/content/3.forms/11.radio-group.md        | 104 ++++++++++++++++++
 docs/content/3.forms/6.radio.md               |  22 ++--
 src/runtime/components/forms/RadioGroup.vue   |   8 +-
 6 files changed, 166 insertions(+), 13 deletions(-)
 create mode 100644 docs/components/content/examples/RadioGroupExample.vue
 create mode 100644 docs/components/content/examples/RadioGroupLabelExample.vue
 create mode 100644 docs/content/3.forms/11.radio-group.md

diff --git a/docs/components/content/examples/RadioExample.vue b/docs/components/content/examples/RadioExample.vue
index 1482705cec..157026f574 100644
--- a/docs/components/content/examples/RadioExample.vue
+++ b/docs/components/content/examples/RadioExample.vue
@@ -1,11 +1,14 @@
 <script setup>
-const options = [{
+const methods = [{
+  name: 'email',
   value: 'email',
   label: 'Email'
 }, {
+  name: 'sms',
   value: 'sms',
   label: 'Phone (SMS)'
 }, {
+  name: 'push',
   value: 'push',
   label: 'Push notification'
 }]
@@ -15,6 +18,6 @@ const selected = ref('sms')
 
 <template>
   <div class="space-y-1">
-    <URadioGroup v-model="selected" :options="options" />
+    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
   </div>
 </template>
diff --git a/docs/components/content/examples/RadioGroupExample.vue b/docs/components/content/examples/RadioGroupExample.vue
new file mode 100644
index 0000000000..f7ff5c9c4e
--- /dev/null
+++ b/docs/components/content/examples/RadioGroupExample.vue
@@ -0,0 +1,18 @@
+<script setup>
+const options = [{
+  value: 'email',
+  label: 'Email'
+}, {
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options" />
+</template>
diff --git a/docs/components/content/examples/RadioGroupLabelExample.vue b/docs/components/content/examples/RadioGroupLabelExample.vue
new file mode 100644
index 0000000000..6861ebeeb0
--- /dev/null
+++ b/docs/components/content/examples/RadioGroupLabelExample.vue
@@ -0,0 +1,20 @@
+<script setup>
+const options = [
+  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
+  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
+  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options">
+    <template #label="{ option }">
+      <p class="italic">
+        <UIcon :name="option.icon" />
+        {{ option.label }}
+      </p>
+    </template>
+  </URadioGroup>
+</template>
diff --git a/docs/content/3.forms/11.radio-group.md b/docs/content/3.forms/11.radio-group.md
new file mode 100644
index 0000000000..22788f5ace
--- /dev/null
+++ b/docs/content/3.forms/11.radio-group.md
@@ -0,0 +1,104 @@
+---
+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/RadioGroup.vue
+---
+
+## Usage
+
+Use a `v-model` to make the RadioGroup reactive.
+
+::component-example
+#default
+:radio-group-example
+
+#code
+```vue
+<script setup>
+const options = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options" />
+</template>
+```
+::
+
+### 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'
+---
+::
+
+### 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
+---
+::
+
+## Slots
+
+### `label`
+
+Use the `#label` slot to override the content of the label.
+
+::component-example
+#default
+:radio-group-label-example
+
+#code
+```vue
+<script setup>
+const options = [
+  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
+  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
+  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options">
+    <template #label="{ option }">
+      <p class="italic">
+        <UIcon :name="option.icon" />
+        {{ option.label }}
+      </p>
+    </template>
+  </URadioGroup>
+</template>
+```
+::
+
+#label
+  [Label]{.italic}
+::
+
+## Props
+
+:component-props
diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md
index 6ec844e7f0..e4d8f2067d 100644
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio.md
@@ -17,19 +17,25 @@ Use a `v-model` to make the Radio reactive.
 #code
 ```vue
 <script setup>
-const options = [
-  { value: 'email', label: 'Email' },
-  { value: 'sms', label: 'Phone (SMS)' },
-  { value: 'push', label: 'Push notification' }
-]
+const methods = [{
+  name: 'email',
+  value: 'email',
+  label: 'Email'
+}, {
+  name: 'sms',
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  name: 'push',
+  value: 'push',
+  label: 'Push notification'
+}]
 
 const selected = ref('sms')
 </script>
 
 <template>
-  <div class="space-y-1">
-    <URadioGroup v-model="selected" :options="options" />
-  </div>
+  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
 </template>
 ```
 ::
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index 2a9168fab6..eeffb6c0a0 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -5,12 +5,14 @@
         v-for="option in normalizedOptions"
         :key="option.value"
         :label="option.label"
-        :model-value="option.value"
-        :checked="option.value === modelValue"
+        :model-value="modelValue"
+        :value="option.value"
         :disabled="disabled"
         @change="onUpdate(option.value)"
       >
-        <slot name="label" v-bind="{ option }" />
+        <template #label>
+          <slot name="label" v-bind="{ option }" />
+        </template>
       </URadio>
     </fieldset>
   </div>

From 4c1e3e37f301fa136064fb47ec7079e39c60156a Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Thu, 28 Sep 2023 13:45:39 +0200
Subject: [PATCH 03/12] feat(RadioGroup): add legend prop & slot

---
 .../content/examples/RadioGroupExample.vue    |  2 +-
 docs/content/3.forms/11.radio-group.md        | 36 +++++++++++++++++--
 src/runtime/components/forms/RadioGroup.vue   | 15 ++++++--
 src/runtime/ui.config.ts                      |  5 +++
 4 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/docs/components/content/examples/RadioGroupExample.vue b/docs/components/content/examples/RadioGroupExample.vue
index f7ff5c9c4e..24747f72b0 100644
--- a/docs/components/content/examples/RadioGroupExample.vue
+++ b/docs/components/content/examples/RadioGroupExample.vue
@@ -14,5 +14,5 @@ const selected = ref('sms')
 </script>
 
 <template>
-  <URadioGroup v-model="selected" :options="options" />
+  <URadioGroup v-model="selected" legend="Choose something" :options="options" />
 </template>
diff --git a/docs/content/3.forms/11.radio-group.md b/docs/content/3.forms/11.radio-group.md
index 22788f5ace..001ccaaa13 100644
--- a/docs/content/3.forms/11.radio-group.md
+++ b/docs/content/3.forms/11.radio-group.md
@@ -34,6 +34,20 @@ const selected = ref('sms')
 
 ### Style
 
+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
@@ -64,7 +78,7 @@ props:
 
 ### `label`
 
-Use the `#label` slot to override the content of the label.
+Use the `#label` slot to override the label of each options.
 
 ::component-example
 #default
@@ -95,10 +109,26 @@ const selected = ref('sms')
 ```
 ::
 
-#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
+
+## Preset
+
+:component-preset
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index eeffb6c0a0..b55a988fcc 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -1,6 +1,11 @@
 <template>
   <div :class="ui.wrapper">
     <fieldset v-bind="attrs">
+      <legend v-if="legend || $slots.legend" :class="ui.legend">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
       <URadio
         v-for="option in normalizedOptions"
         :key="option.value"
@@ -28,10 +33,10 @@ import { mergeConfig, get } from '../../utils'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
-import { radio } from '#ui/ui.config'
+import { radioGroup } from '#ui/ui.config'
 import colors from '#ui-colors'
 
-const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.select, radio)
+const config = mergeConfig<typeof radioGroup>(appConfig.ui.strategy, appConfig.ui.select, radioGroup)
 
 export default defineComponent({
   components: {
@@ -47,6 +52,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    legend: {
+      type: String,
+      default: null
+    },
     options: {
       type: Array,
       default: () => []
@@ -77,7 +86,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('radioGroup', props.ui, config, { mergeWrapper: true })
 
     const { emitFormChange, color, name } = useFormGroup(props, config)
     provide('radio-group', { color, name })
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index 5f416fdc44..c5ead5bdbb 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -579,6 +579,11 @@ export const selectMenu = {
   }
 }
 
+export const radioGroup = {
+  wrapper: 'relative flex items-start',
+  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1'
+}
+
 export const radio = {
   wrapper: 'relative flex items-start',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',

From 3a8b0c4b7c47b17422d81b164849b38db95c6b6a Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Thu, 28 Sep 2023 13:49:47 +0200
Subject: [PATCH 04/12] fix(RadioGroup): add default color

---
 src/runtime/ui.config.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index c5ead5bdbb..aa5c8a7466 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -581,7 +581,10 @@ export const selectMenu = {
 
 export const radioGroup = {
   wrapper: 'relative flex items-start',
-  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1'
+  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
+  default: {
+    color: 'primary'
+  }
 }
 
 export const radio = {

From 66f89e59a8141b1602241de17bd0629bdd7af710 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Thu, 28 Sep 2023 14:44:38 +0200
Subject: [PATCH 05/12] Update docs/content/3.forms/11.radio-group.md

---
 docs/content/3.forms/11.radio-group.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.forms/11.radio-group.md b/docs/content/3.forms/11.radio-group.md
index 001ccaaa13..90d86983a0 100644
--- a/docs/content/3.forms/11.radio-group.md
+++ b/docs/content/3.forms/11.radio-group.md
@@ -78,7 +78,7 @@ props:
 
 ### `label`
 
-Use the `#label` slot to override the label of each options.
+Use the `#label` slot to override the label of each option.
 
 ::component-example
 #default

From 595edd7ab1f73a9e76d6d731f9b9376bacf06e34 Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Thu, 28 Sep 2023 16:27:03 +0200
Subject: [PATCH 06/12] docs(Radio): merge radio and radio group pages

---
 .../content/examples/RadioExample.vue         |  20 +--
 docs/content/3.forms/11.radio-group.md        | 134 ---------------
 docs/content/3.forms/6.radio.md               | 160 +++++++++++-------
 3 files changed, 109 insertions(+), 205 deletions(-)
 delete mode 100644 docs/content/3.forms/11.radio-group.md

diff --git a/docs/components/content/examples/RadioExample.vue b/docs/components/content/examples/RadioExample.vue
index 157026f574..36ae7223f8 100644
--- a/docs/components/content/examples/RadioExample.vue
+++ b/docs/components/content/examples/RadioExample.vue
@@ -1,23 +1,15 @@
 <script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
+const methods = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
 
 const selected = ref('sms')
 </script>
 
 <template>
   <div class="space-y-1">
-    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+    <URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
   </div>
 </template>
diff --git a/docs/content/3.forms/11.radio-group.md b/docs/content/3.forms/11.radio-group.md
deleted file mode 100644
index 90d86983a0..0000000000
--- a/docs/content/3.forms/11.radio-group.md
+++ /dev/null
@@ -1,134 +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/RadioGroup.vue
----
-
-## Usage
-
-Use a `v-model` to make the RadioGroup reactive.
-
-::component-example
-#default
-:radio-group-example
-
-#code
-```vue
-<script setup>
-const options = [
-  { value: 'email', label: 'Email' },
-  { value: 'sms', label: 'Phone (SMS)' },
-  { value: 'push', label: 'Push notification' }
-]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <URadioGroup v-model="selected" :options="options" />
-</template>
-```
-::
-
-### Style
-
-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'
----
-::
-
-### 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
----
-::
-
-## Slots
-
-### `label`
-
-Use the `#label` slot to override the label of each option.
-
-::component-example
-#default
-:radio-group-label-example
-
-#code
-```vue
-<script setup>
-const options = [
-  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
-  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
-  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
-]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <URadioGroup v-model="selected" :options="options">
-    <template #label="{ option }">
-      <p class="italic">
-        <UIcon :name="option.icon" />
-        {{ option.label }}
-      </p>
-    </template>
-  </URadioGroup>
-</template>
-```
-::
-
-### `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
-
-## Preset
-
-:component-preset
diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md
index e4d8f2067d..ca44c76d90 100644
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio.md
@@ -3,12 +3,37 @@ 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
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/RadioGroup.vue
 ---
 
 ## Usage
 
-Use a `v-model` to make the Radio reactive.
+Use a `v-model` to make the RadioGroup reactive.
+
+::component-example
+#default
+:radio-group-example
+
+#code
+```vue
+<script setup>
+const options = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options" />
+</template>
+```
+::
+
+
+Alternatively, you can use individual Radio components:
 
 ::component-example
 #default
@@ -17,111 +42,124 @@ Use a `v-model` to make the Radio reactive.
 #code
 ```vue
 <script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
+const methods = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
 
 const selected = ref('sms')
 </script>
 
 <template>
-  <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+  <div class="space-y-1">
+    <URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
+  </div>
 </template>
 ```
 ::
 
-### Label
+### Legend 
 
-Use the `label` prop to display a label on the right.
+Use the `legend` prop to add a legend to the RadioGroup.
 
-::component-card
+::component-card{slug="radio-group"}
 ---
 baseProps:
-  name: 'radio1'
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
 props:
-  label: 'Label'
+  legend: 'Legend'
 ---
-::
 
+::
 ### Style
 
-Use the `color` prop to change the style of the Radio.
+Use the `color` prop to change the style of the RadioGroup.
 
-::component-card
+::component-card{slug="radio-group"}
 ---
 baseProps:
-  name: 'radio2'
-  label: 'Label'
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
 props:
   color: 'primary'
 ---
 ::
 
-### Required
+### Disabled
 
-Use the `required` prop to display a red star next to the label.
+Use the `disabled` prop to disable the RadioGroup.
 
-::component-card
+::component-card{slug="radio-group"}
 ---
 baseProps:
-  name: 'radio3'
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
 props:
-  label: 'Label'
-  required: true
+  disabled: true
 ---
 ::
 
-### Help
+## Slots
 
-Use the `help` prop to display some text under the Radio.
+### `label`
 
-::component-card
----
-baseProps:
-  name: 'radio4'
-props:
-  label: 'Label'
-  help: 'Please choose one'
----
-::
+Use the `#label` slot to override the label of each option.
 
-### Disabled
+::component-example
+#default
+:radio-group-label-example
 
-Use the `disabled` prop to disable the Radio.
+#code
+```vue
+<script setup>
+const options = [
+  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
+  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
+  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
+]
 
-::component-card
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options">
+    <template #label="{ option }">
+      <p class="italic">
+        <UIcon :name="option.icon" />
+        {{ option.label }}
+      </p>
+    </template>
+  </URadioGroup>
+</template>
+```
+::
+
+### `legend`
+Use the `#legend` slot to override the content of the legend.
+
+::component-card{slug="radio-group"}
 ---
 baseProps:
-  name: 'radio5'
-  label: 'Label'
-  value: true
-props:
-  disabled: true
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+slots:
+  legend: <span class="italic">Legend</span>
 ---
-::
 
-## Slots
+#legend
+  [Legend]{.italic}
+::
 
-### `label`
+### `label` (Radio) 
 
-Use the `#label` slot to override the content of the label.
+Use the `#label` slot to override a Radio's label.
 
 ::component-card
 ---
 slots:
   label: <span class="italic">Label</span>
-baseProps:
-  name: 'radio6'
 ---
 
 #label
@@ -130,8 +168,16 @@ baseProps:
 
 ## Props
 
+### RadioGroup
+:component-props{slug="radio-group"}
+
+### Radio
 :component-props
 
 ## Preset
 
+### RadioGroup
+:component-preset{slug="radio-group"}
+
+### Radio
 :component-preset

From 5d45f876693755c00a90f623b9fe001acf0d39d3 Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Sat, 7 Oct 2023 12:45:42 +0200
Subject: [PATCH 07/12] fix(Radio): missing imports

---
 src/runtime/components/forms/Radio.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 286e285f4e..055438798d 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, inject } from 'vue'
+import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'

From 191d43f847266f9feff6e07cccdb8551daa55ebc Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Sat, 7 Oct 2023 12:53:12 +0200
Subject: [PATCH 08/12] fix(RadioGroup): useUI

---
 src/runtime/components/forms/RadioGroup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index b55a988fcc..acc089546a 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import URadio from './Radio.vue'
-import { computed, defineComponent, provide } from 'vue'
+import { computed, defineComponent, provide, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
@@ -86,7 +86,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('radioGroup', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('radioGroup', props.ui, config)
 
     const { emitFormChange, color, name } = useFormGroup(props, config)
     provide('radio-group', { color, name })

From 5b9f92e4d739aa15dc8228a14916f77a779e178d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 27 Oct 2023 14:54:05 +0200
Subject: [PATCH 09/12] up

---
 docs/components/content/ComponentPreset.vue   |  2 +-
 .../3.forms/{6.radio.md => 6.radio-group.md}  | 56 ++++++++++---------
 2 files changed, 30 insertions(+), 28 deletions(-)
 rename docs/content/3.forms/{6.radio.md => 6.radio-group.md} (82%)

diff --git a/docs/components/content/ComponentPreset.vue b/docs/components/content/ComponentPreset.vue
index 1d6bf46c64..ae030292b4 100644
--- a/docs/components/content/ComponentPreset.vue
+++ b/docs/components/content/ComponentPreset.vue
@@ -24,7 +24,7 @@ const name = `U${upperFirst(camelName)}`
 const preset = config[camelName]
 
 const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`json
+\`\`\`json [${name}.vue]
 ${JSON.stringify(preset, null, 2)}
 \`\`\`\
 `, {
diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio-group.md
similarity index 82%
rename from docs/content/3.forms/6.radio.md
rename to docs/content/3.forms/6.radio-group.md
index e4db46f889..c7c5d18069 100644
--- a/docs/content/3.forms/6.radio.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -1,5 +1,8 @@
 ---
-description: Display a radio field.
+title: RadioGroup
+description: Display a set of radio buttons.
+navigation:
+  badge: New
 links:
   - label: GitHub
     icon: i-simple-icons-github
@@ -16,11 +19,11 @@ Alternatively, you can use individual Radio components:
 
 :component-example{component="radio-example"}
 
-### Legend 
+### Legend
 
 Use the `legend` prop to add a legend to the RadioGroup.
 
-::component-card{slug="radio-group"}
+::component-card
 ---
 baseProps:
   options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
@@ -28,13 +31,13 @@ baseProps:
 props:
   legend: 'Legend'
 ---
-
 ::
+
 ### Style
 
 Use the `color` prop to change the style of the RadioGroup.
 
-::component-card{slug="radio-group"}
+::component-card
 ---
 baseProps:
   options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
@@ -48,7 +51,7 @@ props:
 
 Use the `disabled` prop to disable the RadioGroup.
 
-::component-card{slug="radio-group"}
+::component-card
 ---
 baseProps:
   options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
@@ -66,10 +69,23 @@ 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{slug="radio-group"}
+::component-card
 ---
 baseProps:
   options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
@@ -82,32 +98,18 @@ slots:
   [Legend]{.italic}
 ::
 
-### `label` (Radio) 
+## Props
 
-Use the `#label` slot to override a Radio's label.
+:component-props
 
-::component-card
 ---
-slots:
-  label: <span class="italic">Label</span>
----
-
-#label
-  [Label]{.italic}
-::
-
-## Props
 
-### RadioGroup
-:component-props{slug="radio-group"}
+> Here are the props of the Radio component:
 
-### Radio
-:component-props
+:component-props{slug="radio"}
 
 ## Preset
 
-### RadioGroup
-:component-preset{slug="radio-group"}
-
-### Radio
 :component-preset
+
+:component-preset{slug="radio"}

From 8ead5d80cbd43b4ed60f28d0eeda949fa3781684 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 27 Oct 2023 15:07:35 +0200
Subject: [PATCH 10/12] up

---
 docs/content/3.forms/6.radio-group.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/3.forms/6.radio-group.md
index c7c5d18069..e9ad4b2b09 100644
--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -102,9 +102,7 @@ slots:
 
 :component-props
 
----
-
-> Here are the props of the Radio component:
+:u-divider{label="Radio" type="dashed" class="my-12"}
 
 :component-props{slug="radio"}
 

From 4563505f3a0d8a19f3101f794ada8ad5a4940621 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 27 Oct 2023 15:31:24 +0200
Subject: [PATCH 11/12] up

---
 docs/content/3.forms/5.checkbox.md          |  2 +-
 docs/content/3.forms/6.radio-group.md       | 43 +++++++++++++++++++++
 src/runtime/components/forms/RadioGroup.vue |  6 ++-
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.forms/5.checkbox.md b/docs/content/3.forms/5.checkbox.md
index d6c90d2654..8fadda91fb 100644
--- a/docs/content/3.forms/5.checkbox.md
+++ b/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
 ---
diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/3.forms/6.radio-group.md
index e9ad4b2b09..adca095316 100644
--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -47,6 +47,10 @@ props:
 ---
 ::
 
+::callout{icon="i-heroicons-light-bulb"}
+This prop also work on the Radio component.
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the RadioGroup.
@@ -61,6 +65,45 @@ props:
 ---
 ::
 
+::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`
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index a2dc6e6b8f..6473ea547c 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -79,6 +79,10 @@ export default defineComponent({
         return appConfig.ui.colors.includes(value)
       }
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
@@ -86,7 +90,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config)
+    const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const { emitFormChange, color, name } = useFormGroup(props, config)
     provide('radio-group', { color, name })

From 7028e950c98ddeb14aa60806b4ba497c29a0d9ee Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 27 Oct 2023 15:41:16 +0200
Subject: [PATCH 12/12] remove useless color

---
 src/runtime/components/forms/Radio.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 055438798d..71767e2b91 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -135,8 +135,6 @@ export default defineComponent({
       attrs,
       pick,
       // eslint-disable-next-line vue/no-dupe-keys
-      color,
-      // eslint-disable-next-line vue/no-dupe-keys
       name,
       // eslint-disable-next-line vue/no-dupe-keys
       inputClass