Filtration
A filter panel for narrowing down content. Available as a Button or Icon trigger, opens on click to show filter options. Supports RTL.
'use client'; import { useState } from 'react';import { Filtration, TextInput } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add filtration
Usage
import { Filtration } from "@/components/ui/filtration"<Filtration type="button" />Examples
Button
Filter panel triggered by a button. Click to open and apply filters.
<Filtration triggerLabel="Filter" activeFilters={[]} onRemoveFilter={() => {}} sections={[Icon
Filter panel triggered by an icon button.
<Filtration triggerType="icon" triggerLabel="Open filters" activeFilters={[ { id: 'f1', label: 'Electronics' },API Reference
FiltrationProps
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 |