Blocks / Filter Toolbar

Filter Toolbar beta Pro

The working bar above every real list: search, two filters, a sort, and a density switch.

Preview
128 orders

Built from: Input, Select, Segmented control, Button — include their CSS alongside this block.

<div class="k-ft">
  <div class="searchwrap grow">
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.8-3.8"/></svg>
    <input class="input" type="search" placeholder="Search orders, customers, SKUs…" aria-label="Search">
  </div>
  <select class="k-select" aria-label="Status"><option>All statuses</option><option>Open</option><option>Paid</option><option>Overdue</option></select>
  <select class="k-select" aria-label="Sort"><option>Newest first</option><option>Oldest first</option><option>Total, high to low</option></select>
  <div class="k-seg" role="radiogroup" aria-label="Density">
    <label class="k-seg-item"><input type="radio" name="ft-density" checked><span>Comfort</span></label>
    <label class="k-seg-item"><input type="radio" name="ft-density"><span>Compact</span></label>
  </div>
  <button class="btn" type="button">Export</button>
  <span class="count">128 orders</span>
</div>
/* KATA Block: Filter Toolbar */
.k-ft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--k-font);color:var(--k-ink);border:1px solid var(--k-line);border-radius:13px;padding:12px;background:var(--k-bg)}
.k-ft .grow{flex:1;min-width:170px}
.k-ft .count{font-size:12.5px;color:var(--k-ink-3);margin-inline-start:auto;font-variant-numeric:tabular-nums}
.k-ft select{min-width:130px}

Installation

CLI

node kata-ui.mjs add filter-toolbar

Writes the block’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
  3. Copy the HTML where it belongs.

Usage

Composes the Input search wrap, two Selects, a Segmented view switch and one quiet button — nothing custom but the frame. It sits above data tables, file lists and galleries; the result count belongs at its right end, updated in words ("128 orders"), not hidden in a tooltip. On narrow screens it wraps in reading order: search first, always.

Previous
FAQ