RadioGroup - Nuxt UI

Usage

Use a v-model to make the RadioGroup reactive.

Choose something

Phone (SMS)

Push notification

<script setup lang="ts">
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 lang="ts">
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

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

Style

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

color

Phone (SMS)

Push notification

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

This prop also work on the Radio component.

Disabled

Use the disabled prop to disable the RadioGroup.

disabled

Phone (SMS)

Push notification

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

This prop also work on the Radio component and you can set the disabled field in the options to disable a specific Radio.

Label

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

label

Label

<template>
  <URadio label="Label" />
</template>

Required

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

label

required

Label*

<template>
  <URadio label="Label" required />
</template>

Help

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

label

help

Label

Please choose one

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

Slots

`label`

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

Phone (SMS)

Push notification

<script setup lang="ts">
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

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

`help`

Like the #label slot, use the #help slot to override the content of the help text.

`legend`

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

Legend

Phone (SMS)

Push notification

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

Props

name

string

null

value

string | number | boolean

null

label

string

null

color

string

config.default.color

{ wrapper?: string; container?: string; base?: string; form?: string; color?: string; background?: string; border?: string; ring?: string; inner?: string; label?: string; required?: string; help?: string; default?: DeepPartial<...>; } & { ...; } & { ...; }

{}

string

null

help

string

null

modelValue

string | number | boolean | object

null

inputClass

string

null

required

boolean

false

disabled

boolean

false

Config

Use the ui prop to override the radio group config and the uiRadio prop to override the radio 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'
  }
}

Progress

Show a horizontal bar to indicate task progression.

Range

Display a range field