# Filter bar · MIAN

The toolbar above a list or table: search, quick filter chips, sort, a view switch and the result count.

- Id: `filter-bar` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/filter-bar
- Use for: filters, filter toolbar, search and filter, table toolbar, sort and filter results, faceted search, admin filters.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Invoices toolbar

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/filter-bar/source