Filter bar
The toolbar above a list or table: search, quick filter chips, sort, a view switch and the result count.
Invoices toolbar
<div class="mn-filterbar" role="search" aria-label="Filter invoices">
<div class="mn-input-group mn-filterbar-search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input class="mn-input" type="search" placeholder="Customer, number or amount" aria-label="Search invoices"></div>
<div class="mn-filterbar-chips" aria-label="Status">
<button class="mn-chip" type="button" aria-pressed="true">Overdue</button>
<button class="mn-chip" type="button" aria-pressed="false">Due this week</button>
<button class="mn-chip" type="button" aria-pressed="false">Paid</button>
</div>
<div class="mn-filterbar-end">
<select class="mn-select mn-input-sm" aria-label="Sort by"><option>Newest first</option><option>Oldest first</option><option>Amount, high to low</option></select>
<button class="mn-btn mn-btn-ghost mn-btn-sm" type="button">Clear</button>
</div>
<p class="mn-filterbar-count" role="status"><strong>14</strong> of 2,340 invoices · overdue</p>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/filter-bar.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-filterbar | The bar: wraps to two rows on narrow containers. |
| mn-filterbar-search | The search field (grows). |
| mn-filterbar-chips | Quick filters: mn-chip buttons with aria-pressed. |
| mn-filterbar-end | Sort select and view switch, pushed to the end. |
| mn-filterbar-count | The result line (“128 of 2,340 invoices”): role="status" so changes are announced. |
Accessibility
- Wrap the bar in role="search" when it filters a page of results, or a <form> when it submits.
- Quick filters are toggle buttons (aria-pressed); the count is a live status, so a screen reader hears “128 invoices” after each change.
- Keep a visible “Clear filters” action once anything is applied.