Checkbox

Usage

Import the component and render it.

import { Checkbox } from 'src/components/Checkbox/Checkbox';

<Checkbox size="md" label="Checkbox label" caption="Caption text" />

Accessibility

Role: checkbox (Radix Checkbox: <button role="checkbox"> with aria-checked).

• Indeterminate is exposed with aria-checked="mixed" (Radix: checked="indeterminate").
• The label is a <label for> the control: clicking it toggles the value.
• The caption is linked with aria-describedby and is not part of the accessible name.
• Hover/Pressed states also apply when pointing at the label, not only the box.

Size

Set the size prop: Small is "sm", Medium is "md".

<Checkbox size="sm" label="Checkbox label" />
<Checkbox size="md" label="Checkbox label" />

Status

Set the checked prop: Unchecked is {false}, Checked is {true}, Indeterminate is "indeterminate".

<Checkbox label="Checkbox label" />
<Checkbox checked label="Checkbox label" />
<Checkbox checked="indeterminate" label="Checkbox label" />

States

Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.

<Checkbox disabled label="Checkbox label" />

Used in

Checkbox is part of Form.

Actions

Pass callbacks to respond to the component.

import { Checkbox } from 'src/components/Checkbox/Checkbox';

<Checkbox
  size="md"
  label="Checkbox label"
  caption="Caption text"
  onCheckedChange={(checked) => console.log(checked)}
/>