Checkbox

Preview

<esa-checkbox label="Subscribe to updates" checked></esa-checkbox>

States

<esa-checkbox label="Unchecked"></esa-checkbox>
<esa-checkbox label="Checked" checked></esa-checkbox>
<esa-checkbox label="Indeterminate" indeterminate></esa-checkbox>
<esa-checkbox label="Disabled" disabled></esa-checkbox>
<esa-checkbox label="Disabled + checked" disabled checked></esa-checkbox>

Sizes

<esa-checkbox label="Extra small" size="xs" checked></esa-checkbox>
<esa-checkbox label="Small" size="sm" checked></esa-checkbox>
<esa-checkbox label="Medium" size="md" checked></esa-checkbox>
<esa-checkbox label="Large" size="lg" checked></esa-checkbox>

No label

Omit label for a bare box — supply an aria-label for an accessible name.

<esa-checkbox checked aria-label="Select row"></esa-checkbox>

Form participation

Checked boxes submit on under their name; unchecked boxes submit nothing.

<form>
  <esa-checkbox label="Subscribe" name="subscribe" checked></esa-checkbox>
  <button type="submit">Submit</button>
</form>

API

Events

Accessibility

• The box has role="checkbox" with aria-checked reflecting checked or mixed (indeterminate).
• Focusable via tabindex and toggles on Space or Enter.
• aria-disabled and a -1 tabindex are applied when disabled.
• Without a label, provide an aria-label for an accessible name.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.