Checkbox
A checkbox is an input control that allows a user to select one or more options from a number of choices.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Checkbox } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| label * | ReactNode | — | What ticking the box means. Write it so that ticking it is agreeing with the words. |
| isDisabled | boolean | — | Use only when the reader can see why. |
Anything else you pass is forwarded to the underlying input, so the standard attributes and event handlers work as they normally would.
Accessibility
What the component does for you, and what it needs from you.
- The label is tied to the box, so the words are a target as well as a name.
- The box is a 24px target holding a 13px glyph, measured rather than guessed, so it stays hittable while looking small.
- Space toggles it, which is the native behaviour and the reason this is a real input.
- A group of related boxes needs a group name, or each one is announced with no idea what it belongs to.