RadioGroup - Nuxt UI

Usage

Use a v-model to make the RadioGroup reactive.

Choose something

Phone (SMS)

Push notification

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

Phone (SMS)

Push notification

<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

Legend

Phone (SMS)

Push notification

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

Style

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

color

Phone (SMS)

Push notification

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

This prop also work on the Radio component.

Disabled

Use the disabled prop to disable the RadioGroup.

disabled

Phone (SMS)

Push notification

<URadioGroup
  disabled
  :options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
  model-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.

label

Label

<URadio label="Label" />

Required

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

label

required

Label*

<URadio label="Label" required />

Help

Use the help prop to display some text under the Radio.

label

help

Label

Please choose one

<URadio label="Label" help="Please choose one" />

Slots

`label`

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

Phone (SMS)

Push notification

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

Label

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

`legend`

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

Legend

Phone (SMS)

Push notification

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

Props

{}

{}

name

string

null

label

string

null

help

string

null

modelValue

string | number | boolean | Record<string, any>

null

string

null

value

string | number | boolean

null

color

string

config.default.color

inputClass

string

null

required

boolean

false

disabled

boolean

false

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

Checkbox

Display a checkbox field.

Toggle

Display a toggle field.