Checkbox

The Checkbox component provides a control for binary choices. It supports checked, unchecked, and indeterminate states, making it suitable for forms, settings, and multi-select scenarios.

Use checkboxes when users can select multiple options from a list, or for single opt-in/opt-out choices.

Features

Three states: checked, unchecked, and indeterminate
Controlled and uncontrolled modes
Custom check indicator with animated transitions
Form integration with native checkbox behavior
Accessible with proper ARIA attributes
Works with Label component for click-to-toggle

Usage

import { Checkbox } from '@loke/design-system/checkbox';

export default function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <label htmlFor="terms">Accept terms and conditions</label>
    </div>
  );
}

Tips:

Always pair checkboxes with labels for accessibility.
Use onCheckedChange for controlled behavior.
The checked prop can be true, false, or "indeterminate".

Props

Prop

Type

Examples

Basic checkbox

<Checkbox />

Checkbox with label

Accept terms and conditions

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Indeterminate state

Indeterminate

Click to cycle through states

const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate");

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

Disabled checkbox

Disabled unchecked

Disabled checked

<div className="flex flex-col gap-4">
  <div className="flex items-center space-x-2">
    <Checkbox id="disabled-unchecked" disabled />
    <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
  </div>
  <div className="flex items-center space-x-2">
    <Checkbox id="disabled-checked" disabled defaultChecked />
    <Label htmlFor="disabled-checked">Disabled checked</Label>
  </div>
</div>

Checkbox group

Notification preferences

Email notifications

SMS notifications

Push notifications

Selected: email

const [selected, setSelected] = useState<string[]>([]);

const toggleItem = (item: string) => {
  setSelected(prev =>
    prev.includes(item)
      ? prev.filter(i => i !== item)
      : [...prev, item]
  );
};

<div className="flex flex-col gap-2">
  {['Email', 'SMS', 'Push notifications'].map(item => (
    <div key={item} className="flex items-center space-x-2">
      <Checkbox
        id={item}
        checked={selected.includes(item)}
        onCheckedChange={() => toggleItem(item)}
      />
      <Label htmlFor={item}>{item}</Label>
    </div>
  ))}
</div>

Accessibility

Uses native checkbox semantics with role="checkbox".
Supports keyboard navigation (Space to toggle).
Properly conveys checked state via aria-checked.
Label association enables click-to-toggle.
Focus states are visible for keyboard users.
Disabled state is properly communicated.

Best practices

Always provide a label for each checkbox.
Use required for mandatory form fields.
Group related checkboxes together with a fieldset and legend.
Use indeterminate state for "select all" scenarios with partial selection.
Keep checkbox labels concise and action-oriented.
Consider using switches for instant-apply settings instead of checkboxes.

Checkbox

On this page