{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "filter-bar",
  "name": "Filter bar",
  "category": "Data display",
  "description": "The toolbar above a list or table: search, quick filter chips, sort, a view switch and the result count.",
  "tags": [
    "filter bar",
    "toolbar",
    "filters",
    "search and filter",
    "sort",
    "facets",
    "table toolbar",
    "admin",
    "ecommerce",
    "listing filters"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "filters",
      "filter toolbar",
      "search and filter",
      "table toolbar",
      "sort and filter results",
      "faceted search",
      "admin filters"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/filter-bar",
  "markdownUrl": "https://mian.ro/ai/components/filter-bar.md",
  "classes": [
    {
      "name": "mn-filterbar",
      "description": "The bar: wraps to two rows on narrow containers."
    },
    {
      "name": "mn-filterbar-search",
      "description": "The search field (grows)."
    },
    {
      "name": "mn-filterbar-chips",
      "description": "Quick filters: mn-chip buttons with aria-pressed."
    },
    {
      "name": "mn-filterbar-end",
      "description": "Sort select and view switch, pushed to the end."
    },
    {
      "name": "mn-filterbar-count",
      "description": "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": [
    {
      "title": "Invoices toolbar",
      "description": null,
      "html": "<div class=\"mn-filterbar\" role=\"search\" aria-label=\"Filter invoices\">\n  <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>\n  <div class=\"mn-filterbar-chips\" aria-label=\"Status\">\n    <button class=\"mn-chip\" type=\"button\" aria-pressed=\"true\">Overdue</button>\n    <button class=\"mn-chip\" type=\"button\" aria-pressed=\"false\">Due this week</button>\n    <button class=\"mn-chip\" type=\"button\" aria-pressed=\"false\">Paid</button>\n  </div>\n  <div class=\"mn-filterbar-end\">\n    <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>\n    <button class=\"mn-btn mn-btn-ghost mn-btn-sm\" type=\"button\">Clear</button>\n  </div>\n  <p class=\"mn-filterbar-count\" role=\"status\"><strong>14</strong> of 2,340 invoices · overdue</p>\n</div>"
    }
  ],
  "css": ".mn-filterbar { container: mn-filterbar / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }\n.mn-filterbar-search { flex: 1 1 14rem; min-width: 0; }\n.mn-filterbar-chips { display: flex; flex-wrap: wrap; gap: .4rem; }\n.mn-filterbar-end { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }\n.mn-filterbar-count { flex-basis: 100%; margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }\n.mn-filterbar-count strong { color: var(--mn-fg); }\n@container mn-filterbar (max-width: 32rem) { .mn-filterbar-end { margin-inline-start: 0; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/filter-bar.json"
  }
}