'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
FilterBar
Filters for lists and tables: saved views as tabs, a search, active filters as chips you edit in a popover or remove, an Add filter menu, Clear all, and room for sort or export. Single choice, multiple choice, text and on or off filters.
import { FilterBar } from '@alea/ui';
Examples
FilterBar
Saved views, a search, active filters as chips (press one to edit it, × to remove it), Add filter and Clear all. The value is plain data you send to your API.
view: all · search: “” · filters: {"status":["open"]}
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-border-strong…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Props
FilterBar props
Filters for a list or table: saved views, a search, active filters as chips you can edit or remove, an Add filter menu and Clear all.
| Prop | Type | Default | Description |
|---|---|---|---|
filtersrequired | FilterDef[] | - | The filters people can add. |
aria-label | string | - | Name for screen readers. Default "Filters". |
className | string | - | Extra class names. |
defaultValue | FilterValue | - | The active filters at first. |
end | ReactNode | - | Content at the end of the row: sort, export, a view switch. |
onChange | ((value: FilterValue) => void) | - | Called with all active filters when one changes. |
onSearchChange | ((q: string) => void) | - | Called as people type in the search. |
onViewChange | ((id: string) => void) | - | Called when a view is picked. |
search | string | - | The search text (controlled). Leave out search and onSearchChange to hide the search. |
searchPlaceholder | string | - | Placeholder for the search. |
value | FilterValue | - | The active filters and their values (controlled). |
view | string | - | The current view. |
views | { id: string; label: string; count?: number; }[] | - | Saved views as tabs above the filters (All, Unpaid, Mine). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- States
- Hover
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-filterbar.alea-filterbar-row.alea-filterbar-search.alea-filterbar-chips.alea-filter-chip.alea-filter-chip-main.alea-filter-chip-icon.alea-filter-chip-label.alea-filter-chip-value.alea-filter-popover.alea-filter-chip-remove.alea-filterbar-end- Data attributes
data-empty
Accessibility
- A named group; each chip is a button that says the filter and its value, plus a named Remove button.
- Editing opens a dialog popover with focus inside; Escape closes and returns focus to the chip.
- Clear all and Add filter are real buttons; the views are tabs.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through search, chips, Add filter and Clear all |
| Enter or Space | Edits a chip or opens Add filter |
| Escape | Closes the editor |
Do and don't
Do
- Put the most used filters first in Add filter.
- Save common combinations as views.
Don't
- Don't apply filters only on a separate Apply button when results are fast.