FilterBar
Markdown for agentsList-page filter strip: search field, filter controls, reset affordance and trailing actions.
npx slipstream-ui@latest add filter-barList filters (interactive)
query: — · status: all
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| searchValue | string | — | Controlled search text. |
| onSearchChange | (value: string) => void | — | Fires on each keystroke; hides the search box when omitted. |
| searchPlaceholder | string | 'Search…' | Search placeholder (also its accessible name). |
| onReset | () => void | — | Shows a reset button when provided. |
| activeCount | number | 0 | Active filter count appended to the reset label. |
| trailing | ReactNode | — | Far-right actions (bulk actions, column settings). |
Accessibility
- role=search wraps the controls; the search input is labelled by its placeholder.
- Reset is a normal button with an updated accessible name.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.