Filter

A row of tag buttons that shows only the items that match. It reads tags from the items themselves and announces how many are showing.

CSS: css/components/filter.css
JS: js/components/filter.js

01 — Variants

Filter a list

Items in the target carry data-tags. data-filter="*" shows everything.

Scrolling row

.filter--scroll keeps long tag lists on one row that scrolls sideways, out to the panel’s edges.

02 — Behavior

Script

Name	Detail
`data-filter-target`	A selector for the container of items.
`data-filter-noun`	The word in the announcement: “3 projects”.
Links	Opening the page at `#tag=slug`, or following such a link, applies that tag.

03 — Usage

Use it for

Narrowing a list or gallery by a handful of categories.
Up to about a dozen tags; scroll the row past that.

Avoid

Searching. Use search.
Switching views. Use tabs.

04 — Accessibility

Notes

Pressable tags with aria-pressed, in a labeled group.
A polite live region announces the count after each change.

05 — Without Jewel’s JS

What the script does

The script hides items whose tags don’t match the pressed button, announces the count, and keeps the tag in the URL as #tag=slug. The CSS reads only the markup below, so a framework can filter its own list and leave out filter.js and data-component.

State	Set this	Notes
Pressed tag	`aria-pressed="true"` on one `.tag--button`, `aria-pressed="false"` on the rest	Fills the pressed tag.
Filtered out	`hidden` on each item that doesn’t match	Or don’t render it. `data-filter`, `data-filter-target` and `data-tags` are only read by the script.
Count	“Showing 2 of 3 projects” in `.filter__status`	A polite live region, so screen readers hear each change.
Disabled	`aria-disabled="true"` on `.filter`	Dims the row and stops presses.