RadioGroup

Name: Rad UI
Author: Rad UI Team

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

Default Comfortable Compact

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
onValueChange	function	--