Scale — Checkbox

Install

Examples

States

indeterminate represents a partially-selected parent in a checkbox tree.

Unchecked

Checked

Indeterminate

Validation

Set state to negative or positive to reflect form validity. Add required for native constraint validation.

Please accept the terms

Verified

Disabled

Unchecked

Checked

`sc-checkbox-item` primitive

The standalone checkbox visual — just the square and tick, with no label or form association. Reach for it in custom layouts (cards, list items) where you own the surrounding markup.

Guidelines

Usage

multi-select options, terms acceptance, and labelled settings that need form binding. For a single on/off setting, consider a Toggle; for mutually exclusive choices, use Radio.

Do

Write a clear, positive label — the statement is true when checked.
Use indeterminate only for a parent summarising mixed children.
Reach for sc-checkbox in forms so it binds and validates.

Don’t

Don’t use a checkbox for one mutually exclusive choice — use Radio.
Don’t use the bare sc-checkbox-item without your own label and form wiring.
Don’t phrase labels as negatives — “Don’t send emails” is hard to parse when checked.

Accessibility

Role: renders role="checkbox" with aria-checked reflecting true / false / mixed (indeterminate).
Keyboard: Space toggles the box; the label is also clickable.
Form: sc-checkbox is form-associated — required sets valueMissing validity and it participates in reset.
Label: the slotted text is the accessible name; sc-checkbox-item alone has none, so pair it with your own label.
State colour: negative isn’t signalled by colour alone — pair it with Help Text describing the error.
Focus: shows the global keyboard focus ring on the square.

Properties

Radio — mutually exclusive single-select.
Toggle — an instant on/off switch for a single setting.
Card Selector — a richer, card-based selection control.
Help Text — describe validation errors beneath a field.

Checkbox