Checkbox

An on/off option the person ticks: a setting, a filter, a row to select.

import { Checkbox } from "@hackcove/ui";

<Checkbox label="Email me when a shop I follow posts" defaultChecked />

import { Body, Checkbox, Cluster } from "@hackcove/ui";

<Cluster gap="sm">
  <Checkbox />
  <Body>Email me when a shop I follow posts</Body>
</Cluster>

import { Checkbox } from "@hackcove/ui";

<Checkbox size="sm" aria-label="Select row" />

• Give a Checkbox a label; the whole label is the click target.
• In a table cell leave the label out, use size="sm" and name the box with aria-label.
• align="start" puts the box on the first line of a label that wraps onto several; the default centres it.
• Do not wrap a Checkbox in a Field; it is its own label.
• Choosing one of several is a Select or a SegmentedControl, not a row of checkboxes.

• A native <input type="checkbox"> inside a <label>, so clicking the text toggles it and the label is its name.
• A bare box has no name of its own: aria-label is required.
• The focus ring comes from the component.