Checkbox Group

Preview

<esa-checkbox-group
  label="Monitored media"
  options='[{"label":"Air quality","value":"air"}, …]'
  value='["water"]'
></esa-checkbox-group>

Orientation

vertical is the default; switch to horizontal to lay options out in a row.

<esa-checkbox-group label="Monitored media" orientation="horizontal" options="…"></esa-checkbox-group>

Sizes

<esa-checkbox-group label="Extra small" size="xs" orientation="horizontal" options="…"></esa-checkbox-group>
<esa-checkbox-group label="Small" size="sm" orientation="horizontal" options="…"></esa-checkbox-group>
<esa-checkbox-group label="Medium" size="md" orientation="horizontal" options="…"></esa-checkbox-group>
<esa-checkbox-group label="Large" size="lg" orientation="horizontal" options="…"></esa-checkbox-group>

Form participation

Each selected value is submitted under name. Submitting logs all media entries.

<form>
  <esa-checkbox-group label="Media" name="media" options="…" value='["air"]'></esa-checkbox-group>
  <button type="submit">Submit</button>
</form>

API

Events

Accessibility

• The options container has role="group" labeled by the group label.
• Each box has role="checkbox" with aria-checked and toggles on Space or Enter.
• Disabled options carry aria-disabled and a -1 tabindex.
• The change event is composed and bubbles, so it can be caught on the host or an ancestor.

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.