Filter & Search
Filter bars sit above tables to narrow data by multiple criteria simultaneously. Search is always the first element, followed by select filters. Filters apply instantly on change — no submit button required.
Filter Bar Structure
/* Filter bar layout */
.filter-bar {
display: flex;
gap: 12px;
flex-wrap: wrap; /* wraps on small screens */
margin-bottom: 24px;
}
.filter-item {
flex: 1;
min-width: 180px; /* prevents items from being too narrow */
}Preview
Showing 42 results
Rules
| Rule | Detail |
|---|---|
| Search first | Search input is always the first and widest element. Uses icon-left pattern. |
| Instant filter | Filters trigger on input / change event — no submit button. |
| Result count | Always show a count below the filter bar: "Showing X results" or "X of Y". |
| Clear filters | Show a "Clear filters" ghost button when any filter is active. |
| Empty state | When filter returns 0 results, show empty state with "No results found" + "Clear Filters" CTA. |
| flex-wrap | Always use flex-wrap:wrap so filters stack gracefully on tablet/mobile. |
AI Implementation Notes
For AI coding assistants: Filter bar uses
display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px. Each item is flex:1; min-width:180px. The search input always comes first and uses the icon-left pattern (padding-left:34px + absolute positioned SVG icon). Filters apply instantly on input or change event — never on form submit. Always show a result count below the filter bar. When results are empty, render the empty state with a "Clear Filters" button.