A filter panel for narrowing down content. Available as a Button or Icon trigger, opens on click to show filter options. Supports RTL.
Loading demo: filtration-real-world
npx sdaia-ui@latest add filtration
import { Filtration } from "@/components/ui/filtration"<Filtration type="button" />Filter panel triggered by a button. Click to open and apply filters.
Loading demo: filtration-button
Filter panel triggered by an icon button.
Loading demo: filtration-icon
Props for the Filtration component.
Prop | Type | Default | Required |
|---|---|---|---|
triggerType | 'button' | 'icon' | 'button' | optional |
triggerLabel | string | 'Filter' | optional |
activeFilters | FiltrationActiveFilter[] | [] | optional |
onRemoveFilter | (id: string) => void | - | optional |
sections | FiltrationSectionConfig[] | [] | optional |
applyLabel | string | 'Apply Filters' | optional |
clearLabel | string | 'Clear' | optional |
activeFilterCount | number | - | optional |
onApply | () => void | - | optional |
onClear | () => void | - | optional |
showActions | boolean | true | optional |
open | boolean | - | optional |
defaultOpen | boolean | false | optional |
onOpenChange | (open: boolean) => void | - | optional |
rtl | boolean | false | optional |
className | string | - | optional |
children | ReactNode | - | optional |