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

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

npm install radix-vue

Anatomy

Import all parts and piece them together.

<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	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite 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		string 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 DirectionProvider 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		string The controlled value of the radio item to check. Can be binded as v-model.
name		string The name of the group. 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 check a radio item before the owning form can be submitted.

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

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 overwrite 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
required		boolean When true, indicates that the user must check the radio item before the owning form can be submitted.
value		string The value given as data when submitted with a name.

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	Default	Type
as	'span'	AsTag | Component The element or component this component should render as. Can be overwrite 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 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.