Components
Filters
A comprehensive filtering system with multiple filter types, operators, and visual indicators for data organization.
Loading
Installation
pnpm dlx shadcn@latest add @restrictui/filters
Examples
Debug
Loading
Add Button
Loading
Solid Style
Loading
Radius Full
Loading
Size
Loading
Custom
Loading
Data Grid
Loading
Async
Loading
Nuqs
Loading
Internationalization
Loading
API Reference
This section documents the public API surface of the Filters component.
Filters
The main Filters component provides a comprehensive filtering system with support for multiple field types, operators, and visual indicators.
| Prop | Type | Default |
|---|---|---|
filters | ||
fields | ||
onChange | ||
className | ||
showAddButton | ||
addButtonText | ||
addButtonIcon | ||
addButtonClassName | ||
addButton | ||
variant | ||
size | ||
radius | ||
i18n | ||
showSearchInput | ||
cursorPointer | ||
trigger | ||
allowMultiple | ||
popoverContentClassName |
Types
Public types that you’ll commonly use when integrating Filters.
Filter
| Prop | Type | Default |
|---|---|---|
id | ||
field | ||
operator | ||
values |
FilterFieldConfig
Key configuration for defining fields.
| Prop | Type | Default |
|---|---|---|
key | ||
label | ||
icon | ||
type | ||
options | ||
operators | ||
placeholder | ||
searchable | ||
className | ||
defaultOperator | ||
popoverContentClassName | ||
maxSelections | ||
min | ||
max | ||
step | ||
prefix | ||
suffix | ||
pattern | ||
validation | ||
allowCustomValues | ||
onLabel | ||
offLabel |
FilterFieldsConfig
FilterFieldConfig<T>[] | FilterFieldGroup<T>[]
FilterFieldGroup
| Prop | Type | Default |
|---|---|---|
group | ||
fields |
FilterOption
| Prop | Type | Default |
|---|---|---|
value | ||
label | ||
icon |
FilterOperator
| Prop | Type | Default |
|---|---|---|
value | ||
label | ||
supportsMultiple |
FilterI18nConfig (Partial)
You can pass a partial config via the i18n prop. Tables below list all keys.
| Key | Type | Default |
|---|---|---|
addFilter | ||
searchFields | ||
noFieldsFound | ||
noResultsFound | ||
select | ||
true | ||
false | ||
min | ||
max | ||
to | ||
typeAndPressEnter | ||
selected | ||
selectedCount | ||
percent | ||
defaultCurrency | ||
defaultColor | ||
addFilterTitle |
operators
| Key | Type | Default |
|---|---|---|
is | ||
isNot | ||
isAnyOf | ||
isNotAnyOf | ||
includesAll | ||
excludesAll | ||
before | ||
after | ||
between | ||
notBetween | ||
contains | ||
notContains | ||
startsWith | ||
endsWith | ||
isExactly | ||
equals | ||
notEquals | ||
greaterThan | ||
lessThan | ||
overlaps | ||
includes | ||
excludes | ||
includesAllOf | ||
includesAnyOf | ||
empty | ||
notEmpty |
placeholders
| Key | Type | Default |
|---|---|---|
enterField | ||
selectField | ||
searchField | ||
enterKey | ||
enterValue |
helpers
| Key | Type | Default |
|---|---|---|
formatOperator |
validation
| Key | Type | Default |
|---|---|---|
invalidEmail | ||
invalidUrl | ||
invalidTel | ||
invalid |
Field Types
The Filters component supports various field types, each with specific behaviors and operators:
| Field Type | Operators | Input Type | Description |
|---|---|---|---|
text | Text input with optional pattern validation and search. | ||
number | Number input with min/max/step and optional prefix/suffix. | ||
date | Calendar-based date selection. | ||
daterange | Two date pickers with "to" separator. | ||
select | Searchable dropdown with predefined options. | ||
multiselect | Multi-select dropdown with search and limits. | ||
boolean | Toggle switch with custom on/off labels. | ||
email | Email input with built-in validation. | ||
url | URL input with validation. | ||
tel | Phone input with validation. | ||
time | Time selection component. | ||
datetime | Combined date and time selection. | ||
custom | Provided by customRenderer. | ||
separator | Non-interactive separator. |
Credits
- Built with Radix UI primitives for accessibility.
- Built with Class Variance Authority for styling variants.
- Built with Lucide React for icons.