GitHub

Checkbox

A custom box with checked, indeterminate, and disabled states, Space/Enter keyboard toggling, and an inlined Lucide check icon. Form-associated; emits a composed change event.

Stable wc import '@esa/ecology/esa-checkbox'; Angular usage

Preview

<esa-checkbox label="Subscribe to updates" checked></esa-checkbox>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-checkbox';

@Component({
  selector: 'app-checkbox-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-checkbox label="Subscribe to updates" checked></esa-checkbox>
  `,
})
export class CheckboxDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-checkbox';

@Component({
  selector: 'app-checkbox-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class CheckboxDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-checkbox';

@Component({
  selector: 'app-checkbox-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <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>
  `,
})
export class CheckboxDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-checkbox';

@Component({
  selector: 'app-checkbox-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-checkbox checked aria-label="Select row"></esa-checkbox>
  `,
})
export class CheckboxDemo {}

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>
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-checkbox';

@Component({
  selector: 'app-checkbox-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <form>
      <esa-checkbox label="Subscribe" name="subscribe" checked></esa-checkbox>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class CheckboxDemo {}

API

PropTypeDefaultDescription
label string '' Text rendered beside the box.
size 'xs' | 'sm' | 'md' | 'lg' 'md' Box and label size.
disabled boolean false Disables interaction.
name string | undefined — Form field name — the key this control submits under.
indeterminate boolean false Renders the mixed/partial state with a dash.
checked boolean false Whether the box is checked.

Events

EventTypeDefaultDescription
change CustomEvent<{ checked: boolean }> — Fired when toggled. Composed and bubbling; detail.checked is the new state.
Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

  • (change)="onChange($event.detail)"

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, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

RoleRe-pointReach
.typography-body-2xs
  • --typography-body-2xs-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-2xs-font-size clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) via --font-size-050
  • --typography-body-2xs-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-2xs-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-2xs-line-height 1.6 via --line-height-normal
+6 more components esa-checkbox-group, esa-combobox, esa-input-tag, esa-progress-bar, esa-radio-group, esa-textarea
.typography-body-lg
  • --typography-body-lg-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-lg-font-size clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) via --font-size-300
  • --typography-body-lg-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-lg-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-lg-line-height 1.8 via --line-height-relaxed
+7 more components esa-breadcrumbs, esa-checkbox-group, esa-combobox, esa-input-tag, esa-radio-group, esa-select, esa-textarea
.typography-body-md
  • --typography-body-md-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-md-font-size clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --font-size-200
  • --typography-body-md-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-md-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-md-line-height 1.6 via --line-height-normal
+28 more components esa-app-shell, esa-breadcrumbs, esa-card, esa-checkbox-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-container, esa-danger-zone, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-form-field, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-page-header, esa-popover, esa-progress-bar, esa-radio-group, esa-select, esa-side-dialog, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-textarea
.typography-body-xs
  • --typography-body-xs-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-xs-font-size clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) via --font-size-100
  • --typography-body-xs-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-xs-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-xs-line-height 1.6 via --line-height-normal
+14 more components esa-breadcrumbs, esa-checkbox-group, esa-combobox, esa-command-palette, esa-empty-state, esa-entity-search, esa-field-error, esa-header-nav, esa-input-tag, esa-progress-bar, esa-radio-group, esa-search-panel, esa-select, esa-textarea

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.

Token Reach Resolves to
--focus-ring-color component focus ring group · +34 more #3e9b4f via --color-border-default-focus → --color-grass-10
--focus-ring-offset component focus ring group · +31 more 2px
--focus-ring-width component focus ring group · +35 more 2px via --border-width-focus → --border-width-200
--form-border-color component forms group · +11 more one role per property, so a theme can move the ring's weight and its colour independently. Tier 3's --focus-ring-width now reads this instead of holding a bare 2px, which is the same shape --focus-ring-color has always had (a thin tier-3 alias over a tier-2 role) — width was simply never given the tier-2 half. * * This role was rejected once, and the rejection is worth recording because its PREMISE was wrong rather than its reasoning. The argument against an `emphasis` width was that every 2px border in the kit is micro-geometry — spinner rings, the kbd keycap lip, a chevron. The focus ring was not in that enumeration and does not fit it: 33 components render it, more than read any other tier-3 token, and it is not micro-geometry but an accessibility affordance whose weight is a legitimate brand axis (a spoke that needs a heavier ring for contrast has to be able to reach it). It is also not a `border` in any component — every consumer paints it with `outline` or `box-shadow` — which is precisely why a survey of BORDERS missed it. The name still says `border` because tier 2 already calls the ring's colour --color-border-default-focus via --color-border-default
--form-border-color-focus component forms group · +11 more #3e9b4f via --color-border-default-focus → --color-grass-10
--form-border-width component forms group · +10 more 1px via --border-width-default → --border-width-100
--color-background-brand semantic every component #46a758 via --color-grass-9
--color-background-disabled semantic every component #f0f0f0 via --color-gray-3
--color-background-field semantic every component rgba(0, 0, 0, 0)
--color-border-disabled semantic every component #d9d9d9 via --color-gray-6
--color-content-default semantic every component #202020 via --color-gray-12
--color-content-default-knockout semantic every component #fcfcfc via --color-gray-1
--radius-md semantic every component 0.5rem via --radius-200
--radius-sm semantic every component 0.25rem via --radius-100
--transition-fast semantic every component 150ms via --duration-150
--spacing-200 primitive every component 0.5rem