material-chip — @viewflow/material

assist

filter

input

suggestion

link

soft-disabled

soft-disabled looks identical to disabled but stays in the tab order — Tab to it and note the focus ring lands on it (unlike the disabled chips above, which skip it). Space/Enter/click do nothing: no toggle, no removal, no navigation.

chip-set

material-chip-set is a role="toolbar" with roving tabindex — Tab reaches exactly one chip. ArrowLeft/ArrowRight move between chips (RTL-aware), Home/End jump to the first/last, and the disabled chip is skipped. Inside a removable input chip, ArrowLeft/ArrowRight also move between the label and the × button; Shift+Tab from the × exits straight to the previous chip. Removing a chip drops it from the DOM unless its remove listener calls preventDefault() — try "Pinned".

form

submit to see FormData

Sample usage

<!-- variants -->
<material-chip variant="assist" icon="event" label="Add to calendar"></material-chip>
<material-chip variant="filter" label="Unread" selected></material-chip>
<material-chip variant="input"  label="alex@example.com" selected></material-chip>
<material-chip variant="suggestion" label="Tell me a joke"></material-chip>

<!-- elevated style is orthogonal to variant -->
<material-chip variant="filter" elevated label="Elevated"></material-chip>

<!-- avatar slot for input chips — fully-rounded container when present -->
<material-chip variant="input" label="Kim" selected>
  <img slot="avatar" src="/avatars/kim.jpg" alt="" />
</material-chip>

<!-- soft-disabled: looks disabled, stays tab-focusable, blocks activation -->
<material-chip variant="filter" label="Soft-disabled" soft-disabled></material-chip>

<!-- chip-set: role="toolbar" + roving tabindex + arrow-key nav across chips -->
<material-chip-set>
  <material-chip variant="input" label="Alex" selected></material-chip>
  <material-chip variant="input" label="Jamie"></material-chip>
</material-chip-set>

<!-- form-associated: filter & input chips contribute name=value when selected -->
<form>
  <material-chip variant="filter" name="tags" value="news" label="News"></material-chip>
  <material-chip variant="filter" name="tags" value="docs" label="Docs" selected></material-chip>
</form>

<!-- events -->
<!-- selectedChange: { selected: boolean } on filter/input toggle -->
<!-- filter chips also dispatch native input/change (form libraries, vanilla JS) -->
<!-- remove: cancelable — call preventDefault() to keep the chip; otherwise
     the chip removes itself from the DOM (no manual e.target.remove() needed) -->

Forced colors (Windows High Contrast)

forced-colors: active (DevTools ▸ Rendering ▸ Emulate CSS media feature forced-colors) restores a CanvasText border on elevated chips (the shadow disappears), fills selected filter/input chips with Highlight, and reads disabled via GrayText.