Skip to content

Filter

This component enables the creation of nested filter menus with support for state management, navigation, and optional reset functionality. It uses height transitions for smooth visual changes and dynamically organizes filter content based on provided slots, making it adaptable to varying needs.

TIP

Don't make your view too complex. Limit yourself to one filter per view.

Required icons

angle-left
angle-right
circle-check
magnifying-glass
trash

Props

model-value: FluxFilterState
The filter state.

resettable?: string[]
The fields that are resettable.

Emits

update:model-value: [FluxFilterState]
Triggered when the filter state changes.

reset: [string]
Triggered when the user clicks the reset button. An optional field can be provided if a single filter entry should be resetted.

Slots

default
This slot should contain filters or a separator.

Available filters

Used components