Checkbox
A checkbox lets users select one or more options from a set of choices.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | What ticking the box means. Write it so that a tick means yes to what it says. |
| isDisabled | boolean | None | Use only when people can see why. |
Any other props are passed to the underlying input, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- The label is linked to the box, so clicking the words ticks it too.
- The target is 24px around a 13px glyph, so the box is easy to hit but still looks small.
- Space ticks and unticks it. This is native behaviour, which is why the checkbox is a real input.
- Give a group of related boxes a group name. Otherwise each box is announced with no context.