Skip to content
vviinn DocsDocs Beta

Filters

The filters components allow users to refine product search results. There are two main components: vviinn-filters displays selected primary filters in compact mode, while vviinn-extended-filters shows all activated filters with multiple display modes.

To see the results, use this component in combination with other components like Product List. The previews below use demo filter data instead of a live search.

Examples

Section titled “Examples”

Primary view

Section titled “Primary view”

Shows filters marked as primary in Panel, displayed in compact mode.

Section titled “Modal view”

Shows all activated filters in a modal overlay (vviinn-extended-filters default mode).

Preview inline mode

Section titled “Preview inline mode”

Shows all activated filters with categories displayed in a single row and values shown in a modal with search functionality.

Preview mode with interval inputs

Section titled “Preview mode with interval inputs”

Shows all activated filters displayed directly in the interface without modal overlay.