Forms
Checkbox
A yes or no choice inside a form, with an optional mixed state.
Live example
Breakfast included where offered
Usage
<Checkbox label="Mark as reviewed" checked={reviewed} onChange={setReviewed} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | Clickable label. |
description? | ReactNode | none | Help text under the label. |
indeterminate? | boolean | false | Mixed state for a parent of partly checked items. |
error? | string | none | Error tied to the input. |
onChange? | (checked: boolean) => void | none | Called with the new checked state. |
Do and don't
Do
- Use in forms that are submitted.
- Phrase labels positively: "Send me updates".
Don't
- Use for settings that apply instantly; use Switch.
- Use a checkbox for mutually exclusive options.
Accessibility
- Native input type checkbox, visually replaced but still the focus and click target.
- Mixed state is set on the DOM property, so screen readers announce "mixed".
Keyboard
| Keys | Action |
|---|---|
| Space | Toggles the checkbox |