Component

A composable checkbox with Root and Indicator sub-components. Fully headless — bring your own styles.

View component changelog
preview
React
"use client"

import Checkbox from "@radui/ui/Checkbox"

const CheckboxExample = () => {
    return (
        <div className="flex flex-col gap-3">
            <div className="flex items-center gap-2">
                <Checkbox.Root id="terms">
                    <Checkbox.Indicator />
                </Checkbox.Root>
                <label htmlFor="terms">Accept terms and conditions</label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox.Root id="newsletter">
                    <Checkbox.Indicator />
                </Checkbox.Root>
                <label htmlFor="newsletter">Subscribe to newsletter</label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox.Root id="disabled" disabled>
                    <Checkbox.Indicator />
                </Checkbox.Root>
                <label htmlFor="disabled">Disabled option</label>
            </div>
        </div>
    )
}

export default CheckboxExample

Import all parts of the component and piece them together

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

export default () => {
    return (
        <Checkbox.Root>
            <Checkbox.Indicator />
        </Checkbox.Root>
    )
}

The root checkbox element.

PropTypeDefault
checked
boolean
false
defaultChecked
boolean
false
disabled
boolean
false
required
boolean
false
onCheckedChange
function
--
color
string
""
size
string
""
variant
string
""
customRootClass
string
""

Renders the checkmark icon when the checkbox is checked.

PropTypeDefault
className
string
""
ShortcutDescription
Tab

Moves focus to the checkbox.

Space

Toggles between checked and unchecked states.

ReferenceWhat Rad UI follows
Checkbox pattern

Uses checkbox semantics with aria-checked to expose checked, unchecked, or mixed state.

Edit this page on GitHub →