Component

CheckboxGroup

Groups multiple checkboxes together with shared state management. Each item has a Trigger, Indicator, and Label.

preview

Email notificationsMarketing emailsSecurity alerts

React
"use client"

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

const options = [
    { id: 'notifications', value: 'notifications', label: 'Email notifications' },
    { id: 'marketing', value: 'marketing', label: 'Marketing emails' },
    { id: 'security', value: 'security', label: 'Security alerts' }
]

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

    return (
        <CheckboxGroup.Root
            name="preferences"
            value={checked}
            onValueChange={setChecked}
        >
            {options.map((option) => (
                <CheckboxGroup.Label key={option.id}>
                    <CheckboxGroup.Trigger value={option.value}>
                        <CheckboxGroup.Indicator />
                    </CheckboxGroup.Trigger>
                    {option.label}
                </CheckboxGroup.Label>
            ))}
        </CheckboxGroup.Root>
    )
}

export default CheckboxGroupExample

API Documentation

Anatomy

Import all parts of the component and piece them together

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

export default () => {
    return (
        <CheckboxGroup.Root>
            <CheckboxGroup.Label>
                <CheckboxGroup.Trigger value="option">
                    <CheckboxGroup.Indicator />
                </CheckboxGroup.Trigger>
                Label
            </CheckboxGroup.Label>
        </CheckboxGroup.Root>
    )
}

Root

The root CheckboxGroup component.

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

Keyboard Interactions

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

ARIA References

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