ComponentsBlocksDocsExamples

Accordion
Field
Accordion Menu
Alert Dialog
Avatar
Badge
Breadcrumb
Button
Carousel
Checkbox
Collapsible
Command
Combobox
Context Menu
Date Picker
Dialog
Dropdown Menu
Form
Filters
New
Hover Card
Input
Update
Label
Menubar
Navigation Menu
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Sheet
Slider
Sortable
Switch
Table
Tabs
Tooltip
Toggle
Toggle Group
Tree

Components

Filters

UI Library:

A comprehensive filtering system with multiple filter types, operators, and visual indicators for data organization.

Installation

pnpm dlx shadcn@latest add @toui/filters

Examples

Debug

Add Button

Solid Style

Radius Full

Size

Custom

Data Grid

Async

Nuqs

Internationalization

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.

PropTypeDefault
filters Array
fields FilterFieldsConfig<T>
onChange (filters: Filter<T>[]) => void
className string
showAddButton booleantrue
addButtonText string
addButtonIcon ReactNode
addButtonClassName string
addButton ReactNode
variant enum "outline"
size enum "md"
radius enum "md"
i18n Partial<FilterI18nConfig>
showSearchInput booleantrue
cursorPointer booleantrue
trigger ReactNode
allowMultiple booleantrue
popoverContentClassName string

Types

Public types that you’ll commonly use when integrating Filters.

Filter

PropTypeDefault
idstring
fieldstring
operatorstring
valuesArray

FilterFieldConfig

Key configuration for defining fields.

PropTypeDefault
key string
label string
icon ReactNode
type enum
options Array
operators Array
placeholder string
searchable boolean
className string
defaultOperator string
popoverContentClassName string
maxSelections number
min number
max number
step number
prefix string | ReactNode
suffix string | ReactNode
pattern string
validation (value: unknown) => boolean
allowCustomValues boolean
onLabel string
offLabel string

FilterFieldsConfig

FilterFieldConfig<T>[] | FilterFieldGroup<T>[]

FilterFieldGroup

PropTypeDefault
groupstring
fieldsArray

FilterOption

PropTypeDefault
valueT
labelstring
iconReactNode

FilterOperator

PropTypeDefault
valuestring
labelstring
supportsMultipleboolean

FilterI18nConfig (Partial)

You can pass a partial config via the i18n prop. Tables below list all keys.

KeyTypeDefault
addFilterstring"Add filter"
searchFieldsstring"Search fields..."
noFieldsFoundstring"No fields found."
noResultsFoundstring"No results found."
selectstring"Select..."
truestring"True"
falsestring"False"
minstring"Min"
maxstring"Max"
tostring"to"
typeAndPressEnterstring"Type and press Enter to add tag"
selectedstring"selected"
selectedCountstring"selected"
percentstring"%"
defaultCurrencystring"$"
defaultColorstring"#000000"
addFilterTitlestring"Add filter"
operators
KeyTypeDefault
isstring"is"
isNotstring"is not"
isAnyOfstring"is any of"
isNotAnyOfstring"is not any of"
includesAllstring"includes all"
excludesAllstring"excludes all"
beforestring"before"
afterstring"after"
betweenstring"between"
notBetweenstring"not between"
containsstring"contains"
notContainsstring"does not contain"
startsWithstring"starts with"
endsWithstring"ends with"
isExactlystring"is exactly"
equalsstring"equals"
notEqualsstring"not equals"
greaterThanstring"greater than"
lessThanstring"less than"
overlapsstring"overlaps"
includesstring"includes"
excludesstring"excludes"
includesAllOfstring"includes all of"
includesAnyOfstring"includes any of"
emptystring"is empty"
notEmptystring"is not empty"
placeholders
KeyTypeDefault
enterField(fieldType: string) => string"Enter {fieldType}..."
selectFieldstring"Select..."
searchField(fieldName: string) => string"Search {fieldName.toLowerCase()}..."
enterKeystring"Enter key..."
enterValuestring"Enter value..."
helpers
KeyTypeDefault
formatOperator(operator: string) => stringreplace underscores with spaces
validation
KeyTypeDefault
invalidEmailstring"Invalid email format"
invalidUrlstring"Invalid URL format"
invalidTelstring"Invalid phone format"
invalidstring"Invalid input format"

Field Types

The Filters component supports various field types, each with specific behaviors and operators:

Field TypeOperatorsInput TypeDescription
textenum Text InputText input with optional pattern validation and search.
numberenum Number InputNumber input with min/max/step and optional prefix/suffix.
dateenum Date PickerCalendar-based date selection.
daterangeenum Date RangeTwo date pickers with "to" separator.
selectenum DropdownSearchable dropdown with predefined options.
multiselectenum Multi-SelectMulti-select dropdown with search and limits.
booleanenum SwitchToggle switch with custom on/off labels.
emailenum Email InputEmail input with built-in validation.
urlenum URL InputURL input with validation.
telenum Phone InputPhone input with validation.
timeenum Time PickerTime selection component.
datetimeenum DateTime PickerCombined date and time selection.
customCustomCustom ComponentProvided by customRenderer.
separatorNoneVisual SeparatorNon-interactive separator.

Credits

  • Built with Radix UI primitives for accessibility.
  • Built with Class Variance Authority for styling variants.
  • Built with Lucide React for icons.
PreviouseFormNextHover Card

On This Page

  • Installation
  • Examples
    • Debug
    • Add Button
    • Solid Style
    • Radius Full
    • Size
    • Custom
    • Data Grid
    • Async
    • Nuqs
    • Internationalization
  • API Reference
    • Filters
    • Types
  • Credits

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking Accept, you agree to our use of cookies.
Learn more.

Token UI

Components

  • Overview
  • Pricing
  • Marketplace
  • Features
  • Integrations
  • Pricing

Blocks

  • Charts
  • Team
  • Blog
  • Careers
  • Contact
  • Privacy

Examples

  • Help
  • Sales
  • Advertise

Docs

  • Twitter
  • Instagram
  • LinkedIn

© 2025 TOUI.dev. All rights reserved.

  • Terms and Conditions
  • Privacy Policy