Checkbox

@summonware/ui · checkbox · P0 · Forms

Usage

An independent on/off choice. Use several for a set where any number may be selected; use Radio when exactly one must be. For a single setting that takes effect immediately rather than on submit, Switch is the better fit.
import { Checkbox } from '@summonware/ui';

Best practices

DoWord the label as the positive state — "Send me product updates", never "Do not send me updates".
DoLet the label be clickable. It is bound to the input, so the hit target is the whole row.
Don'tUse a checkbox for a choice that applies instantly. That is a Switch.
Don'tPre-check consent boxes. Beyond being a dark pattern, it is unlawful in several jurisdictions.

Examples

Common configurations, variations and states.

States

Checked, unchecked, errored and disabled.

As a filter set

Status
Several checkboxes forming one multi-select filter — the shape used in list sidebars and offcanvas panels.

Reference variants

2 of 2 labels from the reference are demonstrated above.

Where it appears

Used on 18 catalogued screens, including admins-course-pricing, admins-course-setting-notifications, application-chat, application-ec-add-product, application-ec-cart, application-ec-checkout and 12 more.