Checkbox

Usage

import { Checkbox } from '@wdzyi/ui';

<Checkbox
  checked={all}
  indeterminate={some && !all}
  onChange={selectAll}
>
  All files
</Checkbox>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

checked, defaultCheckedboolean

Checked, when you hold the state, or where it starts when it holds its own.

indeterminateboolean = false

Half checked, for a box that stands for several. It shows a dash.

onChange(checked: boolean) => void

Called with the new state.

childrenReactNode

The label.

metaReactNode

Quieter, at the end of the row, such as a count or a size.

disabled, name, value, idvarious

Passed to the input, as for any checkbox.

Notes

• It’s a real checkbox under the square, so it works in a form, Space toggles it, and a screen reader hears checked, not checked or mixed.
• The tick and the dash are the same three points, moved a frame at a time, so the dash bends into the tick rather than swapping for it, in every browser.
• The whole row is its label, so pressing the words works it too. Its focus ring sits on the square.
• With reduced motion, the fill and the mark appear without moving.