Checkbox

uistable

Checkbox — extracted 1:1 from WEM-App.

npx shadcn add @krawma/checkbox

npm: lucide-react@^1.22.0, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Accept terms

States

checkeduncheckedindeterminatedisabledfocus-visiblearia-invalid

Keyboard

Space

Depends on

utils

Purpose

A binary (or tri-state) toggle for a single option — "on/off", "agree", or one row in a multi-select list. For a single on/off setting that applies immediately, prefer switch; for one-of-many, use radio-group.

Anatomy

A Radix Checkbox (role="checkbox") with an internal indicator. Pair with a Label via id/htmlFor.

Style

No variants — one token-backed box. Checked uses --primary; the indicator icon comes from lucide.

Behavior & functionality

Controlled (checked + onCheckedChange) or uncontrolled (defaultChecked).
Supports the indeterminate state (checked="indeterminate") for "some children selected" parent checkboxes.

Accessibility

Role checkbox; toggles with Space; needs an associated Label or aria-label.
States to honor: checked/unchecked/indeterminate, disabled, visible focus-visible, and aria-invalid for validation errors.

Do / Don't

✅ Use indeterminate for a "select all" parent reflecting partial selection.
❌ Don't use a checkbox for an immediately-applied single setting — use switch.