Radix Vue

Appearance

RadioGroup ​

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

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.

PropTypeDefault
defaultValue
string
modelValue
string
disabled
boolean
name
string
required
boolean
orientation
enum
undefined
dir
enum
loop
boolean
true
asChild
boolean
false
EmitType
@update:modelValue
(value: string) => void
Data AttributeValue
[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.

PropTypeDefault
asChild
boolean
false
value
string
disabled
boolean
required
boolean
Data AttributeValue
[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.

PropTypeDefault
asChild
boolean
false
forceMount
boolean
Data AttributeValue
[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 ​

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