CheckboxGroup

Name: Rad UI
Author: Rad UI Team

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

Email notifications

Marketing emails

Security 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	--