forms

RadioGroup

GitHub

Display a set of radio buttons.

Usage

Use a v-model to make the RadioGroup reactive.

Choose something
<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" legend="Choose something" :options="options" /></template>

Alternatively, you can use individual Radio components:

<script setup>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.

Legend

Use the legend prop to add a legend to the RadioGroup.

Legend
<URadioGroup  legend="Legend"  :options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"  value="sms"/>

Style

Use the color prop to change the style of the RadioGroup.

<URadioGroup  color="primary"  :options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"  value="sms"/>
This prop also work on the Radio component.

Disabled

Use the disabled prop to disable the RadioGroup.

<URadioGroup  disabled  :options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"  value="sms"/>
This prop also work on the Radio component.

Label

Use the label prop to display a label on the right of the Radio.

<URadio label="Label" />

Required

Use the required prop to display a red star next to the label of the Radio.

<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" />

Slots

label

Use the #label slot to override the label of each option.

<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>

Alternatively, you can do the same with individual Radio:

<URadio>  <template #label>    <span class="italic">Label</span>  </template></URadio>

legend

Use the #legend slot to override the content of the legend.

Legend
<URadioGroup  :options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"  value="sms">  <template #legend>    <span class="italic">Legend</span>  </template></URadioGroup>

Props

name
string
null
color
any
config.default.color
ui
any
undefined
modelValue
string | number | Record<string, any>
""
options
unknown[]
[]
legend
string
null
optionAttribute
string
"label"
valueAttribute
string
"value"
uiRadio
any
undefined
disabled
boolean
false
Radio
value
string | number | boolean
null
name
string
null
label
string
null
color
any
config.default.color
ui
any
undefined
help
string
null
id
string
uid()
modelValue
string | number | boolean | Record<string, any>
null
inputClass
string
null
required
boolean
false
disabled
boolean
false

Config

URadioGroup.vue
{  "wrapper": "relative flex items-start",  "legend": "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1",  "default": {    "color": "primary"  }}
URadio.vue
{  "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": "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"  }}

Checkbox

Display a checkbox field.

Toggle

Display a toggle field.