Checkbox

Name: Rad UI
Author: Rad UI Team

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

Accept terms and conditions

Subscribe to newsletter

Disabled option

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

API Documentation

Anatomy

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>
    )
}

Root

The root checkbox element.

Prop	Type	Default
checked	boolean	false
defaultChecked	boolean	false
disabled	boolean	false
required	boolean	false
onCheckedChange	function	--
color	string	""
size	string	""
variant	string	""
customRootClass	string	""

Indicator

Renders the checkmark icon when the checkbox is checked.

Prop	Type	Default
className	string	""