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
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text |
checked | boolean | 'indeterminate' | — | Controlled state |
defaultChecked | boolean | — | Uncontrolled initial state |
onChange | (checked: boolean | 'indeterminate') => void | — | Change handler |
disabled | boolean | false | Disable interaction |
Accessibility
Built on Radix UI Checkbox:
- Keyboard:
Spaceto toggle - Label click toggles checkbox
- Proper
aria-checkedstates includingmixedfor indeterminate