Components

RadioGroup

A set of radio buttons to select a single option from a list.

Usage

Use the v-model directive to control the value of the RadioGroup or the default-value prop to set the initial value when you do not need to control its state.

Items

Use the items prop as an array of strings, numbers or booleans:

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>

<template>
  <URadioGroup v-model="value" :items="items" />
</template>

You can also pass an array of objects with the following properties:

label?: string
description?: string
value?: string
disabled?: boolean

System

This is the first option.

Light

This is the second option.

Dark

This is the third option.

<script setup lang="ts">
const items = ref([
  {
    label: 'System',
    description: 'This is the first option.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    value: 'dark'
  }
])
const value = ref('system')
</script>

<template>
  <URadioGroup v-model="value" :items="items" />
</template>

When using objects, you need to reference the value property of the object in the v-model directive or the default-value prop.

Value Key

You can change the property that is used to set the value by using the value-key prop. Defaults to value.

System

This is the first option.

Light

This is the second option.

Dark

This is the third option.

<script setup lang="ts">
const items = ref([
  {
    label: 'System',
    description: 'This is the first option.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    id: 'dark'
  }
])
const value = ref('light')
</script>

<template>
  <URadioGroup v-model="value" value-key="id" :items="items" />
</template>

Legend

Use the legend prop to set the legend of the RadioGroup.

legend

Theme

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup legend="Theme" default-value="System" :items="items" />
</template>

Orientation

Use the orientation prop to change the orientation of the RadioGroup. Defaults to vertical.

orientation

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup orientation="horizontal" default-value="System" :items="items" />
</template>

Color

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

color

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup color="gray" default-value="System" :items="items" />
</template>

Size

Use the size prop to change the size of the RadioGroup.

size

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup size="xl" default-value="System" :items="items" />
</template>

Disabled

Use the disabled prop to disable the RadioGroup.

disabled

System

Light

Dark

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <URadioGroup disabled default-value="System" :items="items" />
</template>

API

Props

Prop	Default	Type
`as`	`div`	`any` The element or component this component should render as.
`legend`		`string`
`valueKey`	`"value"`	`string` When `items` is an array of objects, select the field to use as the value.
`items`		`(AcceptableValue \| RadioGroupItem)[]`
`size`	`md`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`primary`	`"error" \| "primary" \| "red" \| "orange" \| "amber" \| "yellow" \| "lime" \| "green" \| "emerald" \| "teal" \| "cyan" \| "sky" \| "blue" \| "indigo" \| "violet" \| "purple" \| "fuchsia" \| "pink" \| "rose" \| "gray"`
`orientation`	`"vertical"`	`"horizontal" \| "vertical"` The orientation the radio buttons are laid out.
`defaultValue`		`string` The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
`modelValue`		`string` The controlled value of the radio item to check. Can be binded as `v-model`.
`disabled`		`boolean` When `true`, prevents the user from interacting with radio items.
`required`		`boolean` When `true`, indicates that the user must check a radio item before the owning form can be submitted.
`name`		`string` The name of the group. Submitted with its owning form as part of a name/value pair.
`loop`		`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`ui`		`Partial<{ root: string; fieldset: string; legend: string; item: string; base: string; indicator: string; container: string; wrapper: string; label: string; description: string; }>`

Slots

Slot	Type
`legend`	`{}`
`label`	`{ item: AcceptableValue \| RadioGroupItem; modelValue?: string \| undefined; }`
`description`	`{ item: AcceptableValue \| RadioGroupItem; modelValue?: string \| undefined; }`

Emits

Event	Type
`change`	`[payload: Event]`
`update:modelValue`	`[payload: string]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    radioGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex',
        legend: 'mb-1 block font-medium text-gray-700 dark:text-gray-200',
        item: 'flex items-start',
        base: 'rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900',
        indicator: 'flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full',
        container: 'flex items-center',
        wrapper: 'ms-2',
        label: 'block font-medium text-gray-700 dark:text-gray-200',
        description: 'text-gray-500 dark:text-gray-400'
      },
      variants: {
        color: {
          primary: {
            base: 'focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
            indicator: 'bg-primary-500 dark:bg-primary-400'
          },
          error: {
            base: 'focus-visible:outline-error-500 dark:focus-visible:outline-error-400',
            indicator: 'bg-error-500 dark:bg-error-400'
          },
          red: {
            base: 'focus-visible:outline-red-500 dark:focus-visible:outline-red-400',
            indicator: 'bg-red-500 dark:bg-red-400'
          },
          orange: {
            base: 'focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400',
            indicator: 'bg-orange-500 dark:bg-orange-400'
          },
          amber: {
            base: 'focus-visible:outline-amber-500 dark:focus-visible:outline-amber-400',
            indicator: 'bg-amber-500 dark:bg-amber-400'
          },
          yellow: {
            base: 'focus-visible:outline-yellow-500 dark:focus-visible:outline-yellow-400',
            indicator: 'bg-yellow-500 dark:bg-yellow-400'
          },
          lime: {
            base: 'focus-visible:outline-lime-500 dark:focus-visible:outline-lime-400',
            indicator: 'bg-lime-500 dark:bg-lime-400'
          },
          green: {
            base: 'focus-visible:outline-green-500 dark:focus-visible:outline-green-400',
            indicator: 'bg-green-500 dark:bg-green-400'
          },
          emerald: {
            base: 'focus-visible:outline-emerald-500 dark:focus-visible:outline-emerald-400',
            indicator: 'bg-emerald-500 dark:bg-emerald-400'
          },
          teal: {
            base: 'focus-visible:outline-teal-500 dark:focus-visible:outline-teal-400',
            indicator: 'bg-teal-500 dark:bg-teal-400'
          },
          cyan: {
            base: 'focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400',
            indicator: 'bg-cyan-500 dark:bg-cyan-400'
          },
          sky: {
            base: 'focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400',
            indicator: 'bg-sky-500 dark:bg-sky-400'
          },
          blue: {
            base: 'focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400',
            indicator: 'bg-blue-500 dark:bg-blue-400'
          },
          indigo: {
            base: 'focus-visible:outline-indigo-500 dark:focus-visible:outline-indigo-400',
            indicator: 'bg-indigo-500 dark:bg-indigo-400'
          },
          violet: {
            base: 'focus-visible:outline-violet-500 dark:focus-visible:outline-violet-400',
            indicator: 'bg-violet-500 dark:bg-violet-400'
          },
          purple: {
            base: 'focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400',
            indicator: 'bg-purple-500 dark:bg-purple-400'
          },
          fuchsia: {
            base: 'focus-visible:outline-fuchsia-500 dark:focus-visible:outline-fuchsia-400',
            indicator: 'bg-fuchsia-500 dark:bg-fuchsia-400'
          },
          pink: {
            base: 'focus-visible:outline-pink-500 dark:focus-visible:outline-pink-400',
            indicator: 'bg-pink-500 dark:bg-pink-400'
          },
          rose: {
            base: 'focus-visible:outline-rose-500 dark:focus-visible:outline-rose-400',
            indicator: 'bg-rose-500 dark:bg-rose-400'
          },
          gray: {
            base: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white',
            indicator: 'bg-gray-900 dark:bg-white'
          }
        },
        orientation: {
          horizontal: {
            fieldset: 'flex-row',
            wrapper: 'me-2'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-0.5',
            legend: 'text-xs',
            base: 'size-3',
            item: 'text-xs',
            container: 'h-4',
            indicator: 'after:size-1'
          },
          sm: {
            fieldset: 'gap-0.5',
            legend: 'text-xs',
            base: 'size-3.5',
            item: 'text-xs',
            container: 'h-4',
            indicator: 'after:size-1'
          },
          md: {
            fieldset: 'gap-1',
            legend: 'text-sm',
            base: 'size-4',
            item: 'text-sm',
            container: 'h-5',
            indicator: 'after:size-1.5'
          },
          lg: {
            fieldset: 'gap-1',
            legend: 'text-sm',
            base: 'size-4.5',
            item: 'text-sm',
            container: 'h-5',
            indicator: 'after:size-1.5'
          },
          xl: {
            fieldset: 'gap-1.5',
            legend: 'text-base',
            base: 'size-5',
            item: 'text-base',
            container: 'h-6',
            indicator: 'after:size-2'
          }
        },
        disabled: {
          true: {
            base: 'cursor-not-allowed opacity-75',
            label: 'cursor-not-allowed opacity-75'
          }
        },
        required: {
          true: {
            legend: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
          }
        }
      },
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
})

Progress

An indicator showing the progress of a task.

Select

A select element to choose from a list of options.