Skip to main content
The Checkbox component provides a customizable checkbox with support for checked, unchecked, and indeterminate states.

​
Installation

import { Checkbox, CheckboxIndicator } from "@craftdotui/baseui/components/checkbox";

​
Usage

<Checkbox>
  <CheckboxIndicator />
</Checkbox>

​
Components

​
Checkbox (Root)

​
checked
boolean
Controlled checked state.
​
defaultChecked
boolean
Default checked state for uncontrolled usage.
​
onCheckedChange
function
Callback when checked state changes.
​
disabled
boolean
Disables the checkbox.
​
indeterminate
boolean
Sets the checkbox to indeterminate state.

​
CheckboxIndicator

​
keepMounted
boolean
Keep the indicator mounted when unchecked.
The indicator automatically shows a check icon when checked and a minus icon when indeterminate.

​
Examples

​
Basic Usage

<Checkbox>
  <CheckboxIndicator />
</Checkbox>

​
With Label

<div className="flex items-center gap-2">
  <Checkbox id="terms">
    <CheckboxIndicator />
  </Checkbox>
  <label htmlFor="terms">Accept terms and conditions</label>
</div>

​
Controlled

const [checked, setChecked] = useState(false);

<Checkbox checked={checked} onCheckedChange={setChecked}>
  <CheckboxIndicator />
</Checkbox>

​
Indeterminate State

<Checkbox indeterminate>
  <CheckboxIndicator />
</Checkbox>

​
Accessibility

  • Built on @base-ui/react for full ARIA support
  • Keyboard accessible (Space to toggle)
  • Focus visible ring
  • Proper checked/unchecked/indeterminate states
  • Works with labels via htmlFor

Build docs developers (and LLMs) love

Get started for freeTalk to us