Components

Radio Group

A group of radio buttons where only one can be selected at a time.

A set of mutually exclusive options. Keyboard navigation follows the roving tabindex pattern — arrow keys move between options and selection follows focus.

Anatomy

#legend: Accessible group label rendered above the options.
#item: Content rendered inside each radio button element.

The radio button element itself is rendered by the component. Use the ui.item prop to add classes to it.

Usage

Examples

Object options with labels

Use object options when values need labels, descriptions, or disabled state.

<script setup lang="ts">
const options = [
  { value: "free", label: "Free", description: "Up to 3 projects." },
  { value: "pro", label: "Pro", description: "Unlimited projects." },
  { value: "team", label: "Team", description: "Everything in Pro, plus SSO." },
];
</script>

<template>
  <RadioGroup v-model="plan" :options="options" legend="Choose a plan" />
</template>

Custom item rendering

The #item slot is rendered inside each radio button — provide the visual content only. The button itself handles click and keyboard selection.

<template>
  <RadioGroup
    v-model="selected"
    :options="options"
    :ui="{ item: 'plan-card' }"
  >
    <template #item="{ option, label, description, isChecked }">
      <span class="plan-card__dot" :data-checked="isChecked" />
      <span>
        <strong>{{ label }}</strong>
        <p>{{ description }}</p>
      </span>
    </template>
  </RadioGroup>
</template>

Horizontal layout

Use horizontal orientation for compact sets like sizes or segmented choices.

<template>
  <RadioGroup v-model="size" :options="['S', 'M', 'L', 'XL']" orientation="horizontal" />
</template>

Disabled options

Use getItemDisabled to disable individual options programmatically.

<template>
  <RadioGroup
    v-model="plan"
    :options="options"
    :get-item-disabled="(opt) => opt.value === 'enterprise'"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
`options`	`any[]`	—	Required. Array of option values or objects.
`valueKey`	`string`	—	Property to use as the value when options are objects.
`labelKey`	`string`	`"label"`	Property to use as the display label.
`descriptionKey`	`string`	`"description"`	Property to use as the description text.
`disabled`	`boolean`	`false`	Disable all options.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Layout direction.
`legend`	`string`	—	Visible group label. Slot `#legend` takes priority.
`loop`	`boolean`	`true`	Wrap arrow key navigation at the ends.
`name`	`string`	—	HTML name for form submission.
`required`	`boolean`	`false`	Marks the group as required.
`ariaLabel`	`string`	—	`aria-label` on the group element.
`ariaLabelledby`	`string`	—	`aria-labelledby` on the group element.
`getItemDisabled`	`(option: any) => boolean`	—	Function to disable individual options.
`as`	`string`	`"div"`	Root element tag.
`ui`	`RadioGroupUi`	—	CSS class overrides.

Slots

Slot	Scoped props	Description
`legend`	`{ legend }`	Group label. Defaults to the `legend` prop.
`item`	`{ option, value, label, description, isChecked, isDisabled, select }`	Each radio option.

UI Options

Key	Description
`root`	Root radiogroup element.
`item`	Each option item element.
`indicator`	Default radio indicator.
`input`	Hidden native radio input used for form submission.
`text`	Wrapper around label and description.
`label`	Option label element.
`description`	Option description element.
`legend`	The legend element.

Emits

Event	Payload	Description
`value-change`	`[value: string, details]`	Fired when selected value changes.

Styling Hooks

UI key	CSS class	Data attrs
`root`	`akaza-radio-group`	`data-akaza-orientation`, `data-akaza-disabled`
`legend`	`akaza-radio-group-legend`	—
`input`	`akaza-radio-group-input`	—
`item`	`akaza-radio-group-item`	`data-akaza-state`, `data-akaza-disabled`
`indicator`	`akaza-radio-group-indicator`	—
`text`	`akaza-radio-group-text`	—
`label`	`akaza-radio-group-label`	—
`description`	`akaza-radio-group-description`	—

Progress

Displays a value indicating completion of a task.

Select

Single or multiple listbox select with keyboard navigation, typeahead, and form submission.