Selection Chip Component

Helps users quickly toggle pre-validated input values.

A selection chip is an ARIA toggle button that applies or unapplies its value to a section of a form or application.

Selection chips typically appear in groups (e.g. "Recommended Categories").

After selection chip is loaded in the dom, add selection-chip--animated so the animations can work

<button class="selection-chip" type="button" aria-pressed="false">
  <span class="selection-chip__text"> Football </span>
  <svg class="selection-chip__trailing icon icon--12" width="13" height="12">
    <use href="icons.svg#icon-close-12" />
  </svg>
</button>
Select ComponentSignal Component