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.
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>.
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). |
| Class | string? | null | Additional CSS classes for the wrapper element. |