Flux

Appearance

Select async ​

This is a dynamic form select element that retrieves options dynamically, allowing the user to choose from a list of selections. It resembles a drop-down menu but offers enhanced functionality. The select element can be tailored to permit the selection of multiple values, making it convenient for users who need to choose more than one option. It's particularly beneficial for forms requiring multiple selections, such as selecting multiple interests, hobbies, or preferences.

Select an option...

Required icons

angle-down
magnifying-glass

Props

model-value: FluxFormSelectValue
The selected value(s) of the select element.

disabled?: boolean
If the select element is disabled.

is-multiple?: boolean
If the select element allows multiple values to be selected.

placeholder?: string
The placeholder text to display when no value is selected.

fetch-options: fetchOptions(ids: FluxFormSelectValueSingle[]): Promise<FluxFormSelectEntry[]>
The function to call when the form select needs options by their id.

fetch-relevant: fetchRelevant(): Promise<FluxFormSelectEntry[]>
The function to call when the form select needs relevant options.

fetch-search: fetchSearch(searchQuery: string): Promise<FluxFormSelectEntry[]>
The function to call when the form select needs options based on the given search query.

Emits

update:model-value: [FluxFormSelectValue]
Triggered when the value is changed.

Examples ​

Basic

A basic asynchronous form select.

Select an option...

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormSelectAsync
                v-model="selectedValue"
                :fetch-options="fetchOptions"
                :fetch-relevant="fetchRelevant"
                :fetch-search="fetchSearch"
                placeholder="Select an option..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormSelectAsync, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { FluxFormSelectEntry } from '@flux-ui/types';
    import { ref } from 'vue';
    import dataset from '../../../../../../assets/select-dataset.json' with { type: 'json' };

    const selectedValue = ref(null);

    async function fetchOptions(values: string[]): Promise<FluxFormSelectEntry[]> {
        return dataset.filter(o => values.includes(o.value));
    }

    async function fetchRelevant(): Promise<FluxFormSelectEntry[]> {
        await new Promise(resolve => setTimeout(resolve, 1000));
        return dataset.toSorted();
    }

    async function fetchSearch(searchQuery: string): Promise<FluxFormSelectEntry[]> {
        return dataset.filter(o => o.label.toLowerCase().includes(searchQuery.toLowerCase()));
    }
</script>

Multiple

An asynchronous form select in where you can select multiple options.

Select an option...

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormSelectAsync
                v-model="selectedValue"
                :fetch-options="fetchOptions"
                :fetch-relevant="fetchRelevant"
                :fetch-search="fetchSearch"
                is-multiple
                placeholder="Select an option..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormSelectAsync, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { FluxFormSelectEntry } from '@flux-ui/types';
    import { ref } from 'vue';
    import dataset from '../../../../../../assets/select-dataset.json' with { type: 'json' };

    const selectedValue = ref([]);

    async function fetchOptions(values: string[]): Promise<FluxFormSelectEntry[]> {
        return dataset.filter(o => values.includes(o.value));
    }

    async function fetchRelevant(): Promise<FluxFormSelectEntry[]> {
        await new Promise(resolve => setTimeout(resolve, 1000));
        return dataset.toSorted();
    }

    async function fetchSearch(searchQuery: string): Promise<FluxFormSelectEntry[]> {
        return dataset.filter(o => o.label.toLowerCase().includes(searchQuery.toLowerCase()));
    }
</script>

Used components ​