Chip Filter — Free HTML CSS JS Snippet

Pill-shaped filter chips that instantly filter a card grid by category. Active state, count badges, and animated cards. Zero dependencies.

Chip filters — sometimes called filter pills or tag filters — are a core navigation pattern in component libraries, design systems, marketplaces, and content-heavy interfaces. They give users a tactile, scannable way to narrow a collection without leaving the page. This snippet builds a complete chip filter system with per-category counts, active state management, and live grid filtering using pure HTML, CSS, and vanilla JavaScript.

Chip active state and styling

Each chip button uses border-radius: 999px to create a fully rounded pill shape regardless of text length. In the inactive state the chip has a 1.5px solid #e2e8f0 border on a white background with muted grey text. The .active class switches to a solid indigo fill (background: #6366f1) with white text — a single class toggle drives the full visual transition. A CSS transition on border-color, background, and color ensures the switch animates smoothly rather than snapping.

Count badges

Each chip contains a .chip-count span showing how many items belong to that category. On inactive chips the badge uses a light #f1f5f9 background; on the active chip it inherits white text with a semi-transparent white background (rgba(255,255,255,0.25)) to maintain legibility against the indigo fill. Counts are computed once on load by filtering the ITEMS array — this keeps the JS simple and avoids DOM queries for counting.

Rendering approach

Rather than toggling display or visibility on existing DOM nodes, the render() function replaces grid.innerHTML entirely with only the matching items. This is deliberately simple — for small datasets (under 200 items) it is faster and less error-prone than a dual-state approach with CSS hidden classes. For larger datasets where DOM churn is costly, a hidden class approach with position: absolute would be preferable to avoid reflow.

Data model

Each item object carries name, desc, cat, icon, and bg fields. The category string on each item matches the data-cat attribute on the corresponding chip, making the filter a simple Array.filter() call: ITEMS.filter(i => i.cat === active). Adding a new category requires only adding items with the new cat string and a matching chip button — no other logic changes.

Empty state

When no items match the active filter (impossible with the default data but relevant when connecting to dynamic data), the grid renders a centred "No components match this filter" message. The empty state div is always in the DOM but hidden; show class makes it visible.

Accessibility

The chip group has role="group" and aria-label="Filter by category". The grid has aria-live="polite" so screen readers announce when the content updates after a filter change. Chip buttons are native <button> elements so they receive keyboard focus and fire on Enter/Space by default.