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>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-chip-group';

@Component({
  selector: 'app-chip-group-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-chip-group label="Status filter" value="open" [options]="options"></esa-chip-group>
  `,
})
export class ChipGroupDemo {
  options = [
    { value: 'all', label: 'All', tone: 'neutral' },
    { value: 'open', label: 'Open', tone: 'brand' },
    { value: 'flagged', label: 'Flagged', tone: 'amber' },
  ];
}

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>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-chip-group';

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

API

Events

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.

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.

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.