diff --git a/docs/content/3.forms/6.radio-group.md b/docs/content/3.forms/6.radio-group.md
index f6183a7ec1..c7cb997996 100644
--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -19,6 +19,10 @@ Alternatively, you can use individual Radio components:
:component-example{component="radio-example"}
+::callout{icon="i-heroicons-light-bulb"}
+If using the RadioGroup component, you can customize the Radio options by using the `uiRadio` prop.
+::
+
### Legend
Use the `legend` prop to add a legend to the RadioGroup.
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 71767e2b91..fa12929673 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -14,7 +14,7 @@
v-bind="attrs"
>
-
+
{{ label }}
*
diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index 6473ea547c..1b44d86778 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -13,6 +13,7 @@
:model-value="modelValue"
:value="option.value"
:disabled="disabled"
+ :ui="uiRadio"
@change="onUpdate(option.value)"
>
@@ -33,10 +34,11 @@ import { mergeConfig, get } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
-import { radioGroup } from '#ui/ui.config'
+import { radioGroup, radio } from '#ui/ui.config'
import colors from '#ui-colors'
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.select, radioGroup)
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup)
+const configRadio = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio)
export default defineComponent({
components: {
@@ -86,11 +88,16 @@ export default defineComponent({
ui: {
type: Object as PropType>,
default: undefined
+ },
+ uiRadio: {
+ type: Object as PropType>,
+ default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit }) {
const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
+ const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
const { emitFormChange, color, name } = useFormGroup(props, config)
provide('radio-group', { color, name })
@@ -131,6 +138,8 @@ export default defineComponent({
return {
// eslint-disable-next-line vue/no-dupe-keys
ui,
+ // eslint-disable-next-line vue/no-dupe-keys
+ uiRadio,
attrs,
normalizedOptions,
// eslint-disable-next-line vue/no-dupe-keys
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index f15828f1cf..9a973a47b8 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -777,9 +777,9 @@ export const radio = {
background: 'bg-white dark:bg-gray-900',
border: 'border border-gray-300 dark:border-gray-700',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
- label: 'font-medium text-gray-700 dark:text-gray-200',
- required: 'text-red-500 dark:text-red-400',
- help: 'text-gray-500 dark:text-gray-400',
+ label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
+ required: 'text-sm text-red-500 dark:text-red-400',
+ help: 'text-sm text-gray-500 dark:text-gray-400',
default: {
color: 'primary'
}