Radio Group

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

Option 1

Option 2

Option 3

<script setup lang="ts">
import { ARadioGroupIndicator, ARadioGroupItem, ARadioGroupRoot } from 'akar';
import { ref } from 'vue';

const radioStateSingle = ref('1');

const items = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
];
</script>

<template>
  <ARadioGroupRoot
    v-model="radioStateSingle"
    class="flex flex-col gap-x-2 gap-y-1"
    aria-label="View density"
  >
    <div
      v-for="item in items"
      :key="item.value"
      class="text-sm flex flex-row items-start"
    >
      <div class="flex h-5 items-center">
        <ARadioGroupItem
          :id="item.value"
          class="rounded-full size-4 ring ring-ring-accented ring-inset overflow-hidden focus-visible:(outline-2 outline-primary outline-offset-2)"
          :value="item.value"
        >
          <ARadioGroupIndicator
            class="bg-primary flex size-full items-center justify-center after:(rounded-full bg-background size-1.5 content-empty)"
          />
        </ARadioGroupItem>
      </div>

      <div class="ms-2 w-full">
        <label
          :for="item.value"
          class="color-text font-medium block"
        >
          {{ item.label }}
        </label>
      </div>
    </div>
  </ARadioGroupRoot>
</template>

Features

Full keyboard navigation.
Supports horizontal/vertical orientation.
Can be controlled or uncontrolled.

Anatomy

Import all parts and piece them together.

<script setup>
import { ARadioGroupIndicator, ARadioGroupItem, ARadioGroupRoot } from 'akar';
</script>

<template>
  <ARadioGroupRoot>
    <ARadioGroupItem>
      <ARadioGroupIndicator />
    </ARadioGroupItem>
  </ARadioGroupRoot>
</template>

API Reference

Root

Contains all the parts of a radio group.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`AcceptableValue` 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.
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `AConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with radio items.
`loop`	`true`	`boolean` When `true`, keyboard navigation will loop from last item to first, and vice versa.
`modelValue`		`AcceptableValue`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`		`'horizontal' \| 'vertical'` The orientation of the component.
`required`	`false`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emits

Event	Type
`update:modelValue`	`[payload: string]` Event handler called when the radio group value changes

Slots

Slot	Type
`modelValue`	`null \| string \| number \| bigint \| Record<string, any>` The controlled value of the radio item to check. Can be binded as `v-model`.

Data Attributes

Attribute	Value
`[data-disabled]`	Present when disabled

Item

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with radio items.
`id`		`string`
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`value`		`AcceptableValue` The value given as data when submitted with a `name`.

Emits

Event	Type
`select`	`[event: SelectEvent]` Event handler called when the user selects a link (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the navigation menu from closing when selecting that link.

Slots

Slot	Type
`checked`	`boolean` Current checked state
`required`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`disabled`	`boolean` When `true`, prevents the user from interacting with radio items.

Data Attributes

Attribute	Value
`[data-state]`	`'checked' \| 'unchecked'`
`[data-disabled]`	Present when disabled

Indicator

Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Data Attributes

Attribute	Value
`[data-state]`	`'checked' \| 'unchecked'`
`[data-disabled]`	Present when disabled

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to either the checked radio item or the first radio item in the group.
`Space`	When focus is on an unchecked radio item, checks it.
`ArrowDown`	Moves focus and checks the next radio item in the group.
`ArrowRight`	Moves focus and checks the next radio item in the group.
`ArrowUp`	Moves focus to the previous radio item in the group.
`ArrowLeft`	Moves focus to the previous radio item in the group.

Pin Input

A sequence of one-character alphanumeric inputs.

Select

A select element to choose from a list of options.