Checkbox

A native checkbox, painted by the kit.

Usage

Use it like any input. Point a Label at it to make the text clickable.

tsx
const [checked, setChecked] = useState(true);

<Checkbox id="terms" checked={checked} onChange={(event) => setChecked(event.target.checked)} />
<Label as="label" htmlFor="terms">accept the terms</Label>

Parent and children

indeterminate shows that only some children are checked. Compute it from the selection.

tsx
const [selected, setSelected] = useState<readonly string[]>(["invoices"]);

const toggle = (option: string) =>
  setSelected((current) =>
    current.includes(option) ? current.filter((item) => item !== option) : [...current, option],
  );

<Checkbox
  checked={selected.length === options.length}
  indeterminate={selected.length > 0 && selected.length < options.length}
  onChange={(event) => setSelected(event.target.checked ? options : [])}
/>

<List
  array={options}
  itemExtractor={({ row }) => (
    <Checkbox key={row} checked={selected.includes(row)} onChange={() => toggle(row)} />
  )}
/>

States

tsx
<Checkbox defaultChecked={false} />
<Checkbox defaultChecked />
<Checkbox indeterminate />
<Checkbox defaultChecked disabled />
<Checkbox disabled />

In a form

tsx
<form onSubmit={handleSubmit}>
  <Checkbox name="newsletter" value="weekly" defaultChecked />
  <Button as="button" type="submit">
    <Button.Label>save</Button.Label>
  </Button>
</form>

Reference

proptypedefault
indeterminate?booleanfalsethe third state, neither on nor off
checked?boolean—controlled, with onChange
defaultChecked?boolean—uncontrolled
disabled?booleanfalsenative
…restprops of input—name, value, onChange and the rest; type is always checkbox