Checkbox

Checkbox is a headless primitive that manages the checked/unchecked state and supports an indeterminate state (for parent checkboxes controlling a group). It renders as a button with role="checkbox" and emits an internal hidden input for form integration.

Usage

import { Checkbox, CheckboxIndicator } from '@loke/ui/checkbox';
import { useState } from 'react';

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <span>Accept terms</span>
    </label>
  );
}

Sub-components

• CheckboxIndicator — Visual indicator (checkmark, dash, etc.) shown when checked or indeterminate

Props

Examples

Indeterminate state

Accessibility

• Rendered as role="checkbox" with aria-checked reflecting true, false, or "mixed" (indeterminate).
• Space key toggles the checked state.
• Enter key does NOT toggle (WAI ARIA standard).
• aria-required is set when required prop is true.
• Indeterminate state shows aria-checked="mixed".
• Hidden input bubbles form change events so native form validation works.

Best practices

• Always associate with a label using <label> or aria-labelledby.
• Use indeterminate state for "select all" checkboxes controlling a group.
• Provide clear, concise labels that describe what the checkbox controls.
• Use CheckboxIndicator to render the visual check or dash inside the button.