RadioGroup

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

Default

Comfortable

Compact

vue

<script setup lang="ts">
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
import { ref } from 'vue'

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

<template>
  <RadioGroupRoot
    v-model="radioStateSingle" class="flex flex-col gap-2.5" default-value="default"
    aria-label="View density"
  >
    <div class="flex items-center">
      <RadioGroupItem
        id="r1"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="default"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label class="text-white text-[15px] leading-none pl-[15px]" for="r1">
        Default
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r2"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="comfortable"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label class="text-white text-[15px] leading-none pl-[15px]" for="r2">
        Comfortable
      </label>
    </div>
    <div class="flex items-center">
      <RadioGroupItem
        id="r3"
        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="compact"
      >
        <RadioGroupIndicator
          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
        />
      </RadioGroupItem>
      <label class="text-white text-[15px] leading-none pl-[15px]" for="r3">
        Compact
      </label>
    </div>
  </RadioGroupRoot>
</template>

Features

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

Installation

Install the component from your command line.

bash

npm install radix-vue

Anatomy

Import all parts and piece them together.

vue

<script setup>
import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
</script>

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

API Reference

Root

Contains all the parts of a radio group.

Prop	Type	Default
`defaultValue`	`string`
`modelValue`	`string`
`disabled`	`boolean`
`name`	`string`
`required`	`boolean`
`orientation`	`enum`	`undefined`
`dir`	`enum`
`loop`	`boolean`	`true`
`as`	`string \| Component`	`div`
`asChild`	`boolean`	`false`

Emit	Type
`@update:modelValue`	`(value: string) => void`

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	Type	Default
`as`	`string \| Component`	`button`
`asChild`	`boolean`	`false`
`value`	`string`
`disabled`	`boolean`
`required`	`boolean`

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.

Prop	Type	Default
`as`	`string \| Component`	`span`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`

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.

RadioGroup ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Item ​

Indicator ​

Accessibility ​

Keyboard Interactions ​