Checkbox
Interactive control for binary choices with checked and unchecked states
The checkbox toggles a single on/off value, with checked, unchecked, and indeterminate states. Use it for individual settings, consent agreements, or one item in a list; for a set of related options sharing one value, reach for CheckboxGroup.
Preview
Installation
Usage
Examples
With Label
Pair the checkbox with a Label so clicking the text toggles it.
Controlled
Pass checked and onCheckedChange to manage the state yourself.
Notifications are disabled
Disabled State
Set disabled to prevent interaction.
Elevated Variant
Use variant="elevated" on a Card, Dialog, or popover surface, where the opaque default checkbox would collapse into its parent. See the Surfaces docs.
variant="elevated" when the checkbox sits inside a Card, Dialog, or popover.| Value | Description |
|---|---|
default | Opaque bg-input, for standard page backgrounds. |
elevated | Translucent bg-input-elevated, for Card, Dialog, or popovers. |
Form Integration
Use Field and Form for labeling and validation. See the Forms guide for more patterns.
API Reference
The Checkbox component is built on top of Base UI's Checkbox. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.