Component

RadioCards

Card-style single-selection component. Each card acts as a radio button, ideal for plan or option pickers.

preview

React
"use client"

import RadioCards from "@radui/ui/RadioCards"

const options = [
    { id: 'plus', value: 'plus', title: 'Plus', description: 'For individuals and small teams.' },
    { id: 'pro', value: 'pro', title: 'Pro', description: 'For growing businesses.' },
    { id: 'enterprise', value: 'enterprise', title: 'Enterprise', description: 'For large teams and enterprises.' }
]

const RadioCardsExample = () => {
    return (
        <RadioCards.Root defaultValue="plus" aria-label="Plan">
            {options.map((option) => (
                <RadioCards.Item key={option.id} value={option.value}>
                    <div className="font-semibold text-sm">{option.title}</div>
                    <div className="text-xs text-gray-500">{option.description}</div>
                </RadioCards.Item>
            ))}
        </RadioCards.Root>
    )
}

export default RadioCardsExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <RadioCards.Root name="group">
            <RadioCards.Item value="" />
        </RadioCards.Root>
    )
}

Root

The root RadioCards component.

Prop	Type	Default
name	string	--
value	string	--
defaultValue	string	--
onValueChange	function	--

Keyboard Interactions

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

ARIA References

Reference	What Rad UI follows
Radio group pattern	Uses radio group semantics for at most one selected card when each card has a unique value, with each card exposed as a radio item.