Inputs / Checkbox
Checkbox
The tick is drawn in one stroke and overshoots the box, like a pen would.
Client componentWCAG AASince v0.1
import { Checkbox } from "@plop-ui/react";
<Checkbox checked={all} indeterminate={some} onCheckedChange={toggleAll}>Everyone</Checkbox>
<Checkbox tickColor="var(--plop-leaf)">Caller, by SMS</Checkbox>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| children | ReactNode | none | The label. |
| indeterminate | boolean | false | Shows a dash: some, but not all, of a group is checked. |
| onChange | (event: ChangeEvent<HTMLInputElement, Element>) => void | none | — |
| onCheckedChange | (checked: boolean) => void | none | — |
| tickColor | string | ink | Color of the tick, as a CSS color or token variable. |
Also takes every attribute of <input> (305 more, e.g. onClick, className, aria-*).
Use it well
DoGroup related checkboxes in a fieldset with a legend.
Don'tUse a single checkbox for an on/off setting that applies immediately. That's a Switch.
Accessibility
- A real <input type="checkbox">: forms, keyboard and screen readers just work.
- indeterminate sets the input's own state and aria-checked="mixed".
- Focus draws a dashed outline around the box.