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
undefined
id
string
uid()
color
any
config.default.color
label
string
null
help
string
null
modelValue
string | number | boolean | Record<string, any>
null
inputClass
string
null
required
boolean
false
disabled
boolean
false
Preset
appConfig.ui.radio
undefined