Checkbox

Checkboxes let users select one or more independent options, or toggle a single boolean setting with a square control and optional label.

Overview

catnip-checkbox is a form-associated custom element for one option (box + label text in the default slot), with optional supporting text below the row for errors or hints. The visible box matches the Figma checkbox spec (sizes m / l, checked, indeterminate, disabled, read-only, and danger validation). For a labelled group with shared supporting copy, use Checklist. Multi-select dropdown rows reuse the same internal checkbox chrome. Shared field patterns are summarised on Inputs overview.

Live example

Accessibility

• Native <input type="checkbox"> (visually hidden) drives semantics and keyboard support.
• Space toggles when focused; provide a visible label (default slot) or aria-label.
• intent="danger" sets aria-invalid for validation states.