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

{  "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"  }}