Skip to main content

Checkbox

Checkbox control with label and indeterminate state. Built on Radix UI Checkbox.

Import

import { Checkbox } from '@kikumi3n/ui';

Usage

<Checkbox label="Accept terms" />
<Checkbox label="Subscribe to newsletter" defaultChecked />
<Checkbox label="Disabled option" disabled />

Controlled

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

<Checkbox
label="Notifications"
checked={checked}
onChange={setChecked}
/>

Indeterminate

<Checkbox label="Select all" checked="indeterminate" />

API

PropTypeDefaultDescription
labelstringLabel text
checkedboolean | 'indeterminate'Controlled state
defaultCheckedbooleanUncontrolled initial state
onChange(checked: boolean | 'indeterminate') => voidChange handler
disabledbooleanfalseDisable interaction

Accessibility

Built on Radix UI Checkbox:

  • Keyboard: Space to toggle
  • Label click toggles checkbox
  • Proper aria-checked states including mixed for indeterminate