Components / Controls
Filter chip
An active filter with a one-click clear, as a link or a button.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { FilterChip } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
label | string | The filter name. |
value | string | Its current value. |
href | string | Renders a link that clears the filter. |
onRemove | () => void | Renders a button that clears the filter. |
clearLabel | string | Accessible name of the clear action. |
Behavior
Pass either href or onRemove. Long values truncate inside the chip. The target is 44px on touch.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.