Checkbox

Auto-generate your docs

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)

boolean

Controlled checked state.

boolean

Default checked state for uncontrolled usage.

function

Callback when checked state changes.

boolean

Disables the checkbox.

boolean

Sets the checkbox to indeterminate state.

CheckboxIndicator

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

⌘I

Get Started

Base UI Components

Craft UI Components

Loaders

Hooks

Guides

Installation

Usage

Components

Checkbox (Root)

CheckboxIndicator

Examples

Basic Usage

With Label

Controlled

Indeterminate State

Accessibility

​Installation

​Usage

​Components

​Checkbox (Root)

​CheckboxIndicator

​Examples

​Basic Usage

​With Label

​Controlled

​Indeterminate State

​Accessibility

Installation

Usage

Components

Checkbox (Root)

CheckboxIndicator

Examples

Basic Usage

With Label

Controlled

Indeterminate State

Accessibility