Checkbox

Checkboxes allow users to select one or more items from a set, or to toggle a single option on or off. Built on top of Radix UI primitives for accessibility.

Basic Usage

import { Checkbox } from '@/components'

<Checkbox id="terms" />
<label htmlFor="terms">Accept terms and conditions</label>

States

Checkboxes support three states: unchecked, checked, and indeterminate.

Unchecked

<Checkbox />

Checked

<Checkbox checked />

Indeterminate

The indeterminate state is useful for "select all" checkboxes when only some items are selected.

<Checkbox checked="indeterminate" />

Disabled

Disabled checkboxes cannot be interacted with and display a muted appearance.

<Checkbox disabled />
<Checkbox disabled checked />
<Checkbox disabled checked="indeterminate" />

Error Variant

Use the error variant to indicate validation errors or required fields.

<Checkbox variant="error" />
<Checkbox variant="error" checked />
<Checkbox variant="error" checked="indeterminate" />

Controlled

You can control the checkbox state externally using the checked and onCheckedChange props.

const [checked, setChecked] = useState(false)

<Checkbox
  checked={checked}
  onCheckedChange={(value) => setChecked(value === true)}
/>

All States Overview

Accessibility

• Built on Radix UI Checkbox primitive for robust accessibility
• Full keyboard support (Space to toggle)
• Proper ARIA attributes for screen readers
• Supports aria-label and aria-labelledby for labeling
• Focus states are clearly visible

API Reference

Checkbox Props