FilterPanel
Markdown for agentsStructured filter panel with collapsible sections and reset/apply actions.
npx @slipstream-ui/cli@latest add filter-panelDeal filters
Deal filters
Narrow the deal set.
Industry
Technology
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | FilterSection[] | required | Filter groups: title, optional description, content and defaultOpen. |
| title | string | 'Filters' | Panel heading. |
| description | string | — | Supporting copy under the panel heading. |
| onReset | () => void | — | Reset action shown in the footer. |
| onApply | () => void | — | Apply action shown in the footer. |
| resetLabel | string | 'Reset' | Reset button label. |
| applyLabel | string | 'Apply' | Apply button label. |
| collapsible | boolean | true | Allow sections to collapse. |
| defaultOpen | string[] | — | Section titles open on first render. |
| actions | ReactNode | — | Extra footer content. |
| as | 'div' | 'aside' | 'section' | 'div' | Semantic element. |
Accessibility
- Each section header is a button with aria-expanded and aria-controls.
- Panel title is h2 and section titles are h3.
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.