Display a set of radio buttons.
Use a v-model
to make the RadioGroup reactive.
<script setup lang="ts">
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" legend="Choose something" :options="options" />
</template>
Alternatively, you can use individual Radio components:
<script setup lang="ts">
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.value"
v-model="selected"
v-bind="method"
/>
</div>
</template>
If using the RadioGroup component, you can customize the Radio options by using the
uiRadio
prop.
Use the legend
prop to add a legend to the RadioGroup.
<template>
<URadioGroup
legend="Legend"
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
/>
</template>
Use the color
prop to change the style of the RadioGroup.
<template>
<URadioGroup
color="primary"
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
/>
</template>
This prop also works on the Radio component.
Use the disabled
prop to disable the RadioGroup.
<template>
<URadioGroup
disabled
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification', disabled: true }]"
model-value="sms"
/>
</template>
This prop also works on the Radio component and you can set the
disabled
field in theoptions
to disable a specific Radio.
Use the label
prop to display a label on the right of the Radio.
<template>
<URadio label="Label" />
</template>
Use the required
prop to display a red star next to the label of the Radio.
<template>
<URadio label="Label" required />
</template>
Use the help
prop to display some text under the Radio.
<template>
<URadio label="Label" help="Please choose one" />
</template>
Use the #label
slot to override the label of each option.
<script setup lang="ts">
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>
Alternatively, you can do the same with individual Radio:
<template>
<URadio>
<template #label>
<span class="italic">Label</span>
</template>
</URadio>
</template>
Like the #label
slot, use the #help
slot to override the content of the help text.
Use the #legend
slot to override the content of the legend.
<template>
<URadioGroup
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
>
<template #legend>
<span class="italic">Legend</span>
</template>
</URadioGroup>
</template>
Prop | Type | Default |
---|---|---|
name | string | null |
value | string/number/boolean | null |
label | string | null |
color | string | config.default.color |
ui | object | {} |
help | string | null |
id | string | null |
modelValue | string/number/boolean/object | null |
inputClass | string | null |
required | boolean | false |
disabled | boolean | false |
Prop | Type | Default |
---|---|---|
name | string | null |
color | string | config.default.color |
ui | object | {} |
legend | string | null |
modelValue | string/number/boolean/object | “” |
options | array | [] |
optionAttribute | string | “label” |
valueAttribute | string | “value” |
uiRadio | object | {} |
disabled | boolean | false |
Use the
ui
prop to override the radio group config and theuiRadio
prop to override the radio config.
{
wrapper: 'relative flex items-start',
container: 'flex items-center h-5',
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',
form: 'form-radio',
color: 'text-{color}-500 dark:text-{color}-400',
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',
inner: 'ms-3 flex flex-col',
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'
}
}
{
wrapper: 'relative flex items-start',
fieldset: '',
legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
default: {
color: 'primary'
}
}