Component

RadioGroup

A composable group of radio buttons for single-selection. Manages shared state across all items.

preview

DefaultComfortableCompact

React
"use client"

import RadioGroup from "@radui/ui/RadioGroup"

const options = [
    { id: 'default', value: 'default', label: 'Default' },
    { id: 'comfortable', value: 'comfortable', label: 'Comfortable' },
    { id: 'compact', value: 'compact', label: 'Compact' }
]

const RadioGroupExample = () => {
    return (
        <RadioGroup.Root defaultValue="comfortable" aria-label="Density">
            {options.map((option) => (
                <RadioGroup.Label key={option.id}>
                    <RadioGroup.Item value={option.value}>
                        <RadioGroup.Indicator />
                    </RadioGroup.Item>
                    {option.label}
                </RadioGroup.Label>
            ))}
        </RadioGroup.Root>
    )
}

export default RadioGroupExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import RadioGroup from "@radui/ui/RadioGroup"

export default () => {
    return (
        <RadioGroup.Root aria-label="Group">
            <RadioGroup.Label>
                <RadioGroup.Item value="option">
                    <RadioGroup.Indicator />
                </RadioGroup.Item>
                Label
            </RadioGroup.Label>
        </RadioGroup.Root>
    )
}

Root

The root RadioGroup component.

Prop	Type	Default
name	string	--
value	string	--
defaultValue	string	--
disabled	boolean	false
loop	boolean	true
onValueChange	function	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus into or out of the radio group.
`ArrowRight`	Moves focus to the next enabled radio item and selects it.
`ArrowDown`	Moves focus to the next enabled radio item and selects it.
`ArrowLeft`	Moves focus to the previous enabled radio item and selects it.
`ArrowUp`	Moves focus to the previous enabled radio item and selects it.
`Space`	Selects the focused radio item.

ARIA References

Reference	What Rad UI follows
Radio group pattern	Uses grouped radio semantics for a single required or optional selection among related items.