Components

List filter

Filter DOM collections without a round trip: wire radios and optional search to the same Grid (.columns / .column). Three layouts: category only, text search only, or both combined with AND semantics inside .wckd-filter-radios.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Category filter

Radios + .wckd-sort grid; each .column uses data-category matching the radio value.

Filter by segment

Alpha card
Another A
Beta overview
B-team notes

Markup

<div class="wckd-filter-radios">
  <label><input type="radio" value="*" checked /> All</label>
  <label><input type="radio" value=".group-a" /> Group A</label>
  <div class="columns count-3 wckd-sort">
    <div class="column" data-category="group-a">Item A</div>
  </div>
</div>

Configuration options

Variants: category + grid, text list, or both in one .wckd-filter-radios (AND).

Text search filter

.wckd-list-filter wraps input.wckd-filter + ul.filterable; typing hides non-matches.

  • Apples
  • Oranges
  • Pears

Markup

<div class="wckd-list-filter">
  <form class="wckd-form" onsubmit="event.preventDefault()">
    <div>
      <label for="q">Search</label>
      <input id="q" class="wckd-filter" type="search" placeholder=" " autocomplete="off" />
    </div>
  </form>
  <ul class="filterable"><li>Apples</li><li>Oranges</li></ul>
</div>

Category + text search

Same .wckd-filter-radios root: radios + search + .wckd-sort (AND).

Narrow by team

API reference
SDK quickstart
Colour system
Spacing & layout
Deploy runbook
On-call rotation

Markup

<div class="wckd-filter-radios">
  <input class="wckd-filter" placeholder="Search…" />
  <label><input type="radio" value="*" checked /> All</label>
  <label><input type="radio" value=".dev" /> Engineering</label>
  <div class="columns count-3 wckd-sort">
    <div class="column" data-category="dev">API reference</div>
    <div class="column" data-category="design">Colour system</div>
  </div>
</div>

When to use

  • Use text search when users know keywords and need quick narrowing.
  • Use category radios when users browse by segment (role, topic, product line).
  • Use search plus category radios in one .wckd-filter-radios container when users need both browse-by-tag and keyword narrowing.

Implementation notes

  • Keep targets small (roughly <500 nodes); this filters in the browser, not on the server.
  • Keep data-category tokens aligned with radio value strings.
  • Combined mode: radios + input.wckd-filter + .wckd-sort live in one .wckd-filter-radios.
  • Show an empty state when no rows match.

Developer checklist

  • For text filtering, include input.wckd-filter and ul.filterable inside .wckd-list-filter.
  • For category filtering, place radios and .wckd-sort > .column[data-category] inside .wckd-filter-radios.
  • For category + text on one grid, keep radios, .wckd-sort > .column[data-category], and input.wckd-filter inside the same .wckd-filter-radios root.
  • Keyboard: radios move with arrows; search field is focusable and updates the grid.

← All components