Radio Group

A set of mutually exclusive options. Keyboard navigation uses roving tabindex: 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

<script setup lang="ts">
import { ref } from "vue";
import { RadioGroup } from "akaza-ui";

const selected = ref("email");
const options = ["email", "sms", "push"];
</script>

<template>
  <RadioGroup v-model="selected" :options="options" />
</template>

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 renders inside each radio button. Provide only the visual content; the button handles pointer 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>

Field and form validation

RadioGroup inherits Field name, required/disabled state, label, description, and validation feedback. A separate unnamed validation proxy allows required validation even when no serialization name is provided. Invalid submission focuses the selected or first enabled visible radio. Per-option native inputs still submit the selected named value.

Native reset restores the initial selection unless canceled. Unselected required groups reveal errors after interaction or submission, not on initial render.

API Reference

Props

Slots

UI Options

Emits

Styling Hooks

Keyboard

Arrow navigation wraps when loop is true and skips disabled items.