Checkbox

Installation

Composition

Use the following composition to pair a Checkbox with a label:

Field
├── Checkbox
└── FieldLabel

To add a description, wrap the label and helper text in FieldContent:

Field
├── Checkbox
└── FieldContent
    ├── FieldLabel (or FieldTitle)
    └── FieldDescription

To group related checkboxes, nest Fields inside a FieldGroup and FieldSet:

FieldSet
├── FieldLegend
└── FieldGroup
    ├── Field
    │   ├── Checkbox
    │   └── FieldLabel
    └── Field
        ├── Checkbox
        └── FieldLabel

Checked State

Use defaultChecked for uncontrolled checkboxes, or pair checked with onCheckedChange to control the state.

Indeterminate

Pass the indeterminate prop to render the mixed state — useful for "select all" controls whose children are partially selected.

Invalid State

Set aria-invalid on the checkbox and data-invalid="true" on the surrounding Field to show invalid styles.

Examples

Basic

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description

Use FieldContent and FieldDescription for helper text alongside the label.

Disabled

Add the disabled prop to the checkbox and data-disabled="true" on the Field to apply disabled styles to the label as well.

Group

Use FieldSet and FieldLegend to semantically group related checkboxes.

Table

Use checkboxes inside a Table for row selection. Apply data-state="selected" to the TableRow to style selected rows.

API Reference

Built on Base UI's Checkbox primitive — see the full API reference there. Common props: