# Filter chips and tags

> Filter chips narrow one list by category; tags show static labels such as a skill or a language.

- Block class: `.hs-chips`
- CSS: `components/chips.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html
- Variants: Filter chips, Tags
- HTML page: https://brand.honorsociety.org/components/chips/

## What it is

A filter chip filters one list: 40px pill, 16px/600 sentence case, 1px line-strong border. The current chip fills navy. A tag is a static label, not a link.

## When to use

- Filter chips: categories over one list, such as benefit categories on `/benefits` or article topics on `/articles`.
- Filter chips: the Articles filter on the member profile.
- Tags: static facts on a profile, such as skills and languages, with an optional level.

## When not to use

- To switch between sibling views at their own URLs, use [Tabs](/components/tabs/).
- For a status on a card (“Optional upgrade”), use the card tag `.hs-card__tag` in [Card](/components/card/).
- For an action, use a [Button](/components/button/). A chip only filters.

## Rules

- Filter chips: `ul.hs-chips` > `li` > `a.hs-chip` or `button.hs-chip`. Wrap link chips in a `nav` with an `aria-label`.
- Mark the current link chip with `aria-current="page"`, and a button chip with `aria-pressed`. The current chip fills navy. Never gold.
- Write chip labels in sentence case, as the editors wrote the category names. No uppercase.
- Add `.hs-chips--scroll` for one line that scrolls sideways.
- Tags: `ul.hs-chips` with an `aria-label` > `li.hs-tag`. Put a level in `span.hs-tag__meta`. A tag is never a link and has no hover.
- The colours follow the ground through the `--hs-ctx-*` properties. On `.hs-band--navy` the current chip label turns navy.

## Accessibility

- The current state hangs on `aria-current` or `aria-pressed`, so it reaches the accessibility tree.
- Contrast: chip label ink 13.0:1, current chip white on navy 12.4:1, tag ink on soft 12.2:1, tag level slate 5.9:1.
- A chip is 40px tall, a full tap target. A tag is not interactive, so it has no 40px height.
- Link chips are real URLs (`?category=careers`) and work without JavaScript.
- The scrolling row has padding for the focus outline. Transitions stop under `prefers-reduced-motion: reduce`.

## Variants

### Filter chips

A link chip uses `aria-current="page"`; a button chip uses `aria-pressed`. Add `hs-chips--scroll` for one line that scrolls.

```html
<nav aria-label="Benefit categories">
  <ul class="hs-chips">
    <li><a class="hs-chip" href="?category=all">All benefits</a></li>
    <li><a class="hs-chip" href="?category=careers" aria-current="page">Careers</a></li>
    <li><a class="hs-chip" href="?category=education">Education</a></li>
  </ul>
</nav>
```

### Tags

14px/600 ink on soft, with an optional slate part for a level.

```html
<ul class="hs-chips" aria-label="Skills">
  <li class="hs-tag">Public speaking</li>
  <li class="hs-tag">Spanish <span class="hs-tag__meta">Fluent</span></li>
  <li class="hs-tag">Data analysis</li>
</ul>
```