Prototype Library

Chip Group

Single-select pill toggles — a horizontal row where exactly one chip is active. Each option carries a tone (neutral, neutral-strong, brand, or amber) that colors its active state. Arrow keys move, Enter or Space select. Form-associated; emits a composed change event.

Inherited wc import '@esa/ecology/esa-chip-group';

Preview

Set the options property to a list of { value, label, tone? }. Exactly one chip is active, tracked by value.

<esa-chip-group label="Status filter" value="open"></esa-chip-group>

<script>
  document.querySelector('esa-chip-group').options = [
    { value: 'all', label: 'All', tone: 'neutral' },
    { value: 'open', label: 'Open', tone: 'brand' },
    { value: 'flagged', label: 'Flagged', tone: 'amber' },
  ];
</script>

Tones

Each option's tone sets the palette of its active state, mapped to Ecology semantic tokens. neutral is the default.

{ value: 'n',  label: 'Neutral',        tone: 'neutral' }
{ value: 'ns', label: 'Neutral strong', tone: 'neutral-strong' }
{ value: 't',  label: 'Brand',           tone: 'brand' }
{ value: 'a',  label: 'Amber',          tone: 'amber' }

Sizes

Chips follow the shared form size scale.

<esa-chip-group size="xs" ...></esa-chip-group>
<esa-chip-group size="sm" ...></esa-chip-group>
<esa-chip-group size="md" ...></esa-chip-group>
<esa-chip-group size="lg" ...></esa-chip-group>

API

PropTypeDefaultDescription
options EsaChipOption[] [] Array of {'{ value, label, tone? }'}, or a JSON string of the same when set as an attribute. tone is one of neutral, neutral-strong, brand, amber.
value string '' The selected option value. Exactly one chip is active at a time.
values string[] [] Selected values when `multiple`.
multiple boolean false
size 'xs' | 'sm' | 'md' | 'lg' 'md' Chip size on the shared form scale.
name string | undefined — Field name the selected value is submitted under.
label string '' Accessible label applied to the radiogroup (aria-label).

Events

EventTypeDefaultDescription
change CustomEvent<{ value: string }> — Fired when the selection changes via click or keyboard. Composed and bubbling; detail.value is the newly selected value.
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 host carries role="radiogroup" labeled by label (aria-label).
  • Each chip is a role="radio" with aria-checked; only the active chip is in the tab order (roving tabindex).
  • Arrow keys move selection with wrap-around; Home and End jump to the ends; selection follows arrow focus per the WAI-ARIA radio pattern.
  • Enter and Space select the focused chip.
  • The change event is composed and bubbles, so it can be caught on the host or an ancestor.