Component

CheckboxCards

Card-style multi-select component. Each card acts as a checkbox, making selections visually prominent.

preview

React
"use client"

import { useState } from "react"
import CheckboxCards from "@radui/ui/CheckboxCards"

const options = [
    { id: 'notifications', value: 'notifications', title: 'Enable notifications', description: 'You can enable or disable notifications at any time.' },
    { id: 'marketing', value: 'marketing', title: 'Marketing emails', description: 'Receive occasional product news and feature updates.' },
    { id: 'security', value: 'security', title: 'Security alerts', description: 'Get notified about important account activity.' }
]

const CheckboxCardsExample = () => {
    const [checked, setChecked] = useState(['notifications', 'security'])

    return (
        <CheckboxCards.Root
            name="preferences"
            value={checked}
            onValueChange={setChecked}
        >
            {options.map((option) => (
                <CheckboxCards.Item key={option.id} value={option.value}>
                    <CheckboxCards.Content>
                        <CheckboxCards.Indicator />
                    </CheckboxCards.Content>
                    <div>
                        <div className="font-semibold text-sm">{option.title}</div>
                        <div className="text-xs text-gray-950">{option.description}</div>
                    </div>
                </CheckboxCards.Item>
            ))}
        </CheckboxCards.Root>
    )
}

export default CheckboxCardsExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <CheckboxCards.Root>
            <CheckboxCards.Item value="">
                <CheckboxCards.Content>
                    <CheckboxCards.Indicator />
                </CheckboxCards.Content>
            </CheckboxCards.Item>
        </CheckboxCards.Root>
    )
}

Root

The root CheckboxCards component.

Prop	Type	Default
value	string[]	[]
defaultValue	string[]	[]
onValueChange	function	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus into or out of the checkbox card group.
`ArrowRight`	Moves focus to the next enabled card when the group orientation allows horizontal navigation.
`ArrowDown`	Moves focus to the next enabled card when the group orientation allows vertical navigation.
`ArrowLeft`	Moves focus to the previous enabled card when the group orientation allows horizontal navigation.
`ArrowUp`	Moves focus to the previous enabled card when the group orientation allows vertical navigation.
`Home`	Moves focus to the first enabled card.
`End`	Moves focus to the last enabled card.
`Space`	Toggles the focused card between checked and unchecked states.

ARIA References

Reference	What Rad UI follows
Checkbox pattern	Each card uses checkbox semantics with aria-checked, aria-required, and aria-disabled state exposed on the focusable item.