FilterBar
Layout container for organizing filter controls in a horizontal row.
Overview
The FilterBar component provides a consistent layout for filter controls above tables, lists, or other data displays. It handles responsive wrapping and consistent spacing between filter elements.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Required. Filter control elements |
gap | 'sm' | 'md' | 'lg' | 'md' | Space between filter controls |
Variants
Gap Sizes
Control the spacing between filter controls with the gap prop.
Small gap
Medium gap (default)
Large gap
<FilterBar gap="sm">...</FilterBar>
<FilterBar gap="md">...</FilterBar>
<FilterBar gap="lg">...</FilterBar>Examples
Search and Filters
Common pattern with search input and filter dropdowns.
Compact Toolbar
Tightly spaced controls for dense interfaces.
Full Toolbar
Complete filter toolbar with search and actions.
Accessibility
- Role: Uses
role="search"to identify the region as a search/filter area. - Keyboard Navigation: Tab through child controls in natural order.
- Screen Reader: Announced as a search region containing filter controls.
- WCAG Compliance: Meets AA standards for interactive regions.
Best Practices
- Place FilterBar directly above the content it filters
- Use clear labels or placeholders for filter controls
- Consider collapsible "Advanced Filters" for many options
- Provide a "Clear Filters" action when filters are active
- Keep the most common filters visible, hide secondary ones