RadioGroup

Display a set of radio buttons.

Usage

Use a v-model to make the RadioGroup reactive.

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

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

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

<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 works on the Radio component.

Disabled

Use the disabled prop to disable the RadioGroup.

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

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

Required

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

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

Help

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

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

Slots

Label

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

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

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

<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

Radio Props

Prop	Type	Default
name	string	null
value	string/number/boolean	null
label	string	null
color	string	config.default.color
ui	object	{}
help	string	null
id	string	null
modelValue	string/number/boolean/object	null
inputClass	string	null
required	boolean	false
disabled	boolean	false

RadioGroup Props

Prop	Type	Default
name	string	null
color	string	config.default.color
ui	object	{}
legend	string	null
modelValue	string/number/boolean/object	“”
options	array	[]
optionAttribute	string	“label”
valueAttribute	string	“value”
uiRadio	object	{}
disabled	boolean	false

Config

Use the ui prop to override the radio group config and the uiRadio prop to override the radio config.

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

RadioGroup Config

{
  wrapper: 'relative flex items-start',
  fieldset: '',
  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
  default: {
    color: 'primary'
  }
}