forms
Radio
Display a radio field.
Usage
Use a v-model to make the Radio reactive.
<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 selected = ref('sms')
</script>
<template>
<URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
</template>Label
Use the label prop to display a label on the right.
<URadio label="Label" />Style
Use the color prop to change the style of the Radio.
<URadio color="primary" />Required
Use the required prop to display a red star next to the label.
<URadio label="Label" required />Help
Use the help prop to display some text under the Radio.
Please choose one
<URadio label="Label" help="Please choose one" />Disabled
Use the disabled prop to disable the Radio.
<URadio disabled />Slots
label
Use the #label slot to override the content of the label.
<URadio>
<template #label>
<span class="italic">Label</span>
</template>
</URadio>Props
value
string | number | boolean
null
name
string
null
ui
any
{}
color
string
appConfig.ui.radio.default.color
modelValue
string | number | boolean | Record<string, any>
null
help
string
null
label
string
null
inputClass
string
null
required
boolean
false
disabled
boolean
false
Preset
appConfig.ui.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",
"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",
"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",
"default": {
"color": "primary"
}
}