Chip Group

The inherited Ecology chip group, wearing the Biochar Atlas skin. A horizontal row of pill toggles — single-select radiogroup by default, independent checkbox set with multiple. In the Atlas it carries the application-goals step: pick goals, get scored against them.

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

Single select

Exactly one chip is active (the WAI-ARIA radiogroup pattern). Arrow keys move the selection with wrap-around; Home/End jump to the ends.

<esa-chip-group label="Primary goal" name="goal" value="water"></esa-chip-group>

<script>
  el.options = [
    { value: 'water', label: 'Water retention' },
    { value: 'som', label: 'Soil organic matter' },
    { value: 'carbon', label: 'Carbon sequestration' },
    { value: 'ph', label: 'pH adjustment' },
  ];
</script>

Multi select

With multiple, chips toggle independently and the selection lives in the values array — the shape of the Atlas's “select application goals” step. Arrows move focus without selecting; Enter or Space toggles the focused chip.

<esa-chip-group label="Application goals" name="goals" multiple></esa-chip-group>

<script>
  el.options = [/* goals */];
  el.values = ['water', 'som', 'carbon'];
</script>

Tones

Each option can name an active-state palette: neutral (default), neutral-strong, brand, or amber. The tones map to Ecology semantic tokens — under the Biochar theme, brand reads the primary chain (--color-primary-subtle tint, --color-primary text), so it renders forest green here, and amber follows the warning chain, i.e. the score amber.

el.options = [
  { value: 'neutral', label: 'Neutral' },
  { value: 'neutral-strong', label: 'Neutral strong', tone: 'neutral-strong' },
  { value: 'brand', label: 'Brand', tone: 'brand' },
  { value: 'amber', label: 'Amber', tone: 'amber' },
];
el.values = ['neutral', 'neutral-strong', 'brand', 'amber'];

Sizes

<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

Prop	Type	Default	Description
`options`	`{ value, label, tone? }[]`	`[]`	The chips. Set as a property; the attribute form also accepts a JSON string. tone picks the active-state palette per chip.
`value`	`string`	`''`	Selected chip's value in single-select mode (reflected attribute); bound to the form value.
`values`	`string[]`	`[]`	Selected values in multiple mode. Form value is the comma-joined list.
`multiple`	`boolean`	`false`	Chips toggle independently (checkbox-group pattern) instead of exactly-one (radiogroup).
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Chip padding and text size (shared form scale).
`name`	`string`	`''`	Form field name for the form-associated value.
`label`	`string`	`''`	Accessible name for the group (set as aria-label on the host).

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ value } \| { values }>`	—	Fired on selection change. Composed and bubbling; detail carries value (single) or values (multiple).