Flux

Appearance

Filter options ​

This component provides an option select functionality, allowing users to select multiple options from a set of predefined options. It handles state updates automatically.

WARNING

This component can only be used within a Filter.

Required icons

magnifying-glass
circle-check

Props

icon?: FluxIconName
The icon of the filter.

is-searchable?: boolean
Indicates that the option filter is searchable.

label: string
The label of the filter.

name: string
The name of the filter within the filter state.

options: FluxFilterOptionRow[]
The available options.

search-placeholder?: boolean
The placeholder to show in the search bar.

Snippet ​

vue
<template>
    <FluxPane style="width: max-content">
        <FluxFilter v-model="filterState">
            <FluxFilterOptions
                icon="clone"
                label="Options"
                name="options"
                :options="[
                        {label: 'Option A', value: 'a'},
                        {label: 'Option B', value: 'b'},
                        {label: 'Option C', value: 'c'},
                        {label: 'Option D', value: 'd'},
                        {label: 'Option E', value: 'e'}
                    ]"/>
        </FluxFilter>
    </FluxPane>
</template>

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

    const filterState = ref<FluxFilterState>({
        options: ['b', 'd'],

        get resettable(): string[] {
            return [];
        },

        reset(): void {
        }
    });
</script>

Used components ​