All components (204)
Applied filters
Management · AppliedFilters · .amset-filters
What it is and when to use it
The chips for the filters that are currently set, above a table or a list. They serve two purposes: showing why results are missing and letting one be removed without going back to the filter panel.
When to use it
- Above a table, an order list or search results, each chip with its field and its value (
fieldandvalue: "Status: Pending shipment"). - It is controlled:
onRemovearrives with the key and the consumer actually removes the filter. onClearadds "Clear all" (clearTextchanges it);maxsums up the ones that do not fit as "+N";emptysays what is shown when there are none (by default, nothing).
When not to
- Choosing the filters:
FilterGroup. - Marks that cannot be removed (the status of an order):
Tag. - Choosing several options inside a field:
MultiSelect.
Keyboard: the chips are a grid (role="grid") with a single Tab stop: the arrow keys move from one to another (wrapping around at the ends), Home and End go to the first and the last, and Delete or Backspace remove the one that has focus, in addition to its button. When one is removed, focus moves to the next one (or to the previous one, if it was the last) instead of getting lost. "Clear all" is a separate button, with its own stop. When the last one is removed or everything is cleared, focus moves to the empty text; without it, to the next thing on the page (or the previous one, or the container), never to the body. If the consumer moves focus elsewhere in onRemove or onClear, that is respected.
Accessibility: the group is named like label ("Applied filters"), each chip is read in full ("Status: Pending shipment") and each remove button says only once which filter it removes ("Remove the filter Status: Pending shipment"). The "+N" is seen as "+2" and heard in full, with the plural of the language: "2 more filters".
Fine-tuning: CSS variables --amset-filters-*: -chip-padding, -extra, -font, -gap, -radius, -remove, -remove-icon, -target. The size moves the gap, the padding of the pill and the font size. The cross is SEEN at -remove and PRESSED at -target: 24 px with a mouse and the touch target with a finger.
What it looks like
<AppliedFilters
filters={[{ key: 'color', field: 'Color', value: 'Blue' }]}
onRemove={quitar}
/>Props
Import it with import { AppliedFilters } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
filtersrequired | readonly AppliedFilter[] | — |
onRemoverequired | (key: string) => void | — |
className | string | Merged with the library classes; it does not replace them. |
clearText | string | — |
empty | ReactNode | What is shown when there are none. Nothing by default. When the list is emptied, focus moves here. |
label | string | Text in front: "Filters:". It goes as the group's name. |
max | number | How many are shown before summing up as "+N". |
onClear | () => void | With this, the clear-all button appears. |
size | "sm" | "md" | "lg" | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-filters-gap | var(--amset-space-2) |
--amset-filters-font | var(--amset-text-sm) |
--amset-filters-chip-padding | 2px var(--amset-space-1) 2px var(--amset-space-2) |
--amset-filters-radius | var(--amset-radius) |
--amset-filters-remove | 1.125rem |
--amset-filters-remove-icon | 0.625rem |
--amset-filters-target | 1.5rem |
--amset-filters-extra | calc((var(--amset-filters-target) - var(--amset-filters-remove)) / 2) |
How to change it
.amset-filters {
--amset-filters-gap: ...;
--amset-filters-font: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: