Flux

Appearance

Filter bar ​

The filter bar combines a search input with dynamic filter buttons into a single toolbar. Active filters are shown as individual buttons with a badge indicating the selected value. When the bar runs out of space, overflow filters collapse into a flyout menu. This component is an alternative to Filter and is well suited for use above data tables.

TIP

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

Required icons

magnifying-glass
sliders-simple

Props

model-value: FluxFilterState
The filter state.

search?: string
The current search query.

is-searchable?: boolean
Whether the search input is shown.

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

search-placeholder?: string
The placeholder text for the search input.

Emits

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

update:search: [string]
Triggered when the search query changes.

reset: [string]
Triggered when a filter is reset. Contains the name of the reset filter field.

Slots

default
This slot should contain filter components.

Examples ​

Basic

A basic filter bar with a search input and filters.

<template>
    <FluxFilterBar
        v-model="filterState"
        v-model:search="search"
        is-searchable
        search-placeholder="Search items..."
        :resettable="['status', 'category']">
        <FluxFilterOption
            icon="circle-check"
            label="Status"
            name="status"
            :options="[
                {label: 'Active', value: 'active'},
                {label: 'Inactive', value: 'inactive'},
                {label: 'Pending', value: 'pending'}
            ]"/>

        <FluxFilterOption
            icon="clone"
            label="Category"
            name="category"
            :options="[
                {label: 'Electronics', value: 'electronics'},
                {label: 'Clothing', value: 'clothing'},
                {label: 'Books', value: 'books'}
            ]"/>

        <FluxFilterRange
            icon="coin"
            label="Price"
            name="price"
            :formatter="priceFormatter"
            :max="1000"
            :min="0"
            :step="10"/>
    </FluxFilterBar>
</template>

<script
    lang="ts"
    setup>
    import { FluxFilterBar, FluxFilterOption, FluxFilterRange } from '@flux-ui/components';
    import type { FluxFilterState } from '@flux-ui/types';
    import { ref } from 'vue';

    const search = ref('');

    const filterState = ref<FluxFilterState>({
        status: null,
        category: null,
        price: null
    });

    function priceFormatter(value: number): string {
        return new Intl.NumberFormat(navigator.language, {
            currency: 'EUR',
            maximumFractionDigits: 0,
            style: 'currency'
        }).format(value / 100);
    }
</script>

Used components ​