Filter Builder
A declarative inline filter canvas. Define fields with FilterField, add optional presets with FilterPreset, and let the component render an interactive chip-based toolbar — no Apply button needed.
Quick Start
Click 'Filter' to open the field picker, then adjust operator and value inline in each chip. Use ChipSize to control chip height — Small is the default (28 px).
Medium (32 px)
Large (36 px)
Features
Inline Canvas
Filters display as interactive chips directly in the page — no popover or modal.
Instant Filtering
Changes apply immediately on every operator/value change — no Apply button.
8 Field Types
Text, Number, Date, DateRange, Boolean, Select, MultiSelect, and Custom.
EditorType Control
Override the value input per field: CurrencyInput for decimals, MaskedInput for phone numbers, etc.
Filter Presets
Register reusable filter sets via FilterPresets child content. Appears as a Presets dropdown.
@bind-Filters
Two-way binding via Filters/FiltersChanged. Combine with ApplyFilters() LINQ extension.
Nested Groups
Set AllowGroups=true to enable the predicate-tree editor with AND/OR logic toggles and nested sub-groups.
Examples
Basic Example
Product catalog with Text, Select, Currency, and Boolean filters.
All Field Types
Employee directory using all 8 field types + EditorType overrides.
Presets
Order management with one-click preset filters + DataTable.
Custom Controls
Star-rating custom control via RenderFragment<FilterCondition>.
Nested Groups
Predicate-tree editor with AND/OR logic toggles and nested sub-groups.
State Persistence
Save and restore filter state via localStorage.
FilterBuilder Parameters
| Prop | Type | Default | Description |
|---|---|---|---|
| TData | type parameter | — | The data model type being filtered. |
| Filters | FilterGroup? | null | Current filter state. Use @bind-Filters for two-way binding. |
| FiltersChanged | EventCallback<FilterGroup> | — | Two-way binding callback. |
| OnFilterChange | EventCallback<FilterGroup> | — | Fires immediately when any condition changes. |
| FilterFields | RenderFragment? | null | FilterField child declarations. |
| FilterPresets | RenderFragment? | null | FilterPreset child declarations. Adds a Presets dropdown. |
| ButtonText | string | "Filter" | Label on the add-filter button (shown when no conditions are active). |
| PresetsVariant | FilterPresetsVariant | Dropdown | How presets are rendered: Dropdown (button + menu) or Tabs (horizontal tab bar with implicit "All" tab). |
| MaxTabs | int? | null | Maximum visible preset tabs when using Tabs variant. Excess presets overflow into a "More ▾" dropdown. |
| ChipSize | FilterChipSize | Small | Height of every chip: Small (h-7), Medium (h-8), Large (h-9). |
| AllowGroups | bool | false | When true, enables the predicate-tree editor: logic toggle (ALL of / ANY of) + [+ Add group] button for nested sub-groups. |
| FieldPickerVariant | FilterFieldPickerVariant | Dropdown | Field picker style: Dropdown (hierarchical menu with sub-menus) or Combobox (searchable — recommended for 15+ fields). |
| ComboboxSearchInterval | int | 200 | Debounce interval in milliseconds for the Combobox field picker search input. Only applies when FieldPickerVariant is Combobox. |
| Class | string? | null | Additional CSS classes for the wrapper element. |