Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

RadioGroup

Default

Comfortable

Compact

<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'akar';
import { ref } from 'vue';
import './styles.css';

const radioStateSingle = ref('default');
</script>

<template>
  <div class="akar-demo akar-demo-RadioGroup">
    <RadioGroupRoot
      v-model="radioStateSingle"
      class="RadioGroupRoot"
      default-value="default"
      aria-label="View density"
    >
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <RadioGroupItem
          id="r1"
          class="RadioGroupItem"
          value="default"
        >
          <RadioGroupIndicator
            class="RadioGroupIndicator"
          />
        </RadioGroupItem>
        <label
          class="Label"
          for="r1"
        >
          Default
        </label>
      </div>
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <RadioGroupItem
          id="r2"
          class="RadioGroupItem"
          value="comfortable"
        >
          <RadioGroupIndicator
            class="RadioGroupIndicator"
          />
        </RadioGroupItem>
        <label
          class="Label"
          for="r2"
        >
          Comfortable
        </label>
      </div>
      <div :style="{ display: 'flex', alignItems: 'center' }">
        <RadioGroupItem
          id="r3"
          class="RadioGroupItem"
          value="compact"
        >
          <RadioGroupIndicator
            class="RadioGroupIndicator"
          />
        </RadioGroupItem>
        <label
          class="Label"
          for="r3"
        >
          Compact
        </label>
      </div>
    </RadioGroupRoot>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/grass.css';

@scope (.akar-demo-RadioGroup) {
  /* reset */
  button {
    all: unset;
  }

  .RadioGroupRoot {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .RadioGroupItem {
    background-color: white;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    box-shadow: 0 2px 10px var(--black-a7);
  }
  .RadioGroupItem:hover {
    background-color: var(--grass-3);
  }
  .RadioGroupItem:focus {
    box-shadow: 0 0 0 2px black;
  }

  .RadioGroupIndicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .RadioGroupIndicator::after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--grass-11);
  }

  .Label {
    color: white;
    font-size: 15px;
    line-height: 1;
    padding-left: 15px;
  }
}

Features

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

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'akar';
</script>

<template>
  <RadioGroupRoot>
    <RadioGroupItem>
      <RadioGroupIndicator />
    </RadioGroupItem>
  </RadioGroupRoot>
</template>

API Reference

Root

Contains all the parts of a radio group.

Prop	Default	Type
`as`	`"div"`	`AsTag \| 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 `ConfigProvider` 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` The controlled value of the radio item to check. Can be binded as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`		`"vertical" \| "horizontal"` 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.

Event	Payload
`update:modelValue`	`payload: AcceptableValue` Event handler called when the radio group value changes

Slot (default)	Payload
`modelValue`	`null \| string \| number \| bigint \| Record<string, any>` Current input values

RadioGroupRoot.vue source

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

Prop	Default	Type
`as`	`"button"`	`AsTag \| 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 the radio item.
`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`.

Event	Payload
`select`	`event: SelectEvent`

Slot (default)	Payload
`checked`	`boolean` Current checked state
`required`	`boolean` Required state
`disabled`	`boolean` Disabled state

RadioGroupItem.vue source

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

Defer mounting with forceMount / Presence. See the animation guide.

Prop	Default	Type
`as`	`"span"`	`AsTag \| 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.

RadioGroupIndicator.vue source

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

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

RangeCalendar

Presents a calendar view tailored for selecting date ranges.