Flux

Select ​

The select lets users choose one or more options from a list. Enable is-searchable to filter long lists and is-multiple to allow several values at once. Options can be grouped.

Accessibility

The control is exposed as a role="combobox" and tracks the highlighted option through aria-activedescendant and aria-controls while the popup is open. When name is set, the selected values are mirrored into a hidden input so the select participates in native form submission.

Required icons

angles-up-down
magnifying-glass
xmark

Props

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

search-query?: string
The current search query. Use `v-model:search-query` to control or observe the search input.

auto-focus?: boolean
Focus the select when the form is mounted.

disabled?: boolean
If the select element is disabled.

error?: string | null
Error message describing why the select is invalid. Sets aria-invalid and a red border.

is-loading?: boolean
Shows a loading spinner inside the select.

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

is-readonly?: boolean
If the select is readonly. Blocks opening the popup.

is-searchable?: boolean
If the select element is searchable.

is-secondary?: boolean
If the field is secondary and is rendered in an alternative style.

name?: string
The name attribute passed to a hidden form control.

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

options: FluxFormSelectEntry[]
The options to display in the select element. Options can be grouped.

Emits

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

update:search-query: [string]
Triggered when the search query changes. Use `v-model:search-query` to control or observe the search input.

Examples ​

Basic

A basic form select.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormSelect
                v-model="selectedValue"
                :options="options"
                placeholder="Select an option..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormSelect, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const selectedValue = ref(0);

    const options = [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 },
        { label: 'Option 4', value: 4 },
        { label: 'Option 5', value: 5 },
        { label: 'Option 6', value: 6 }
    ];
</script>

Searchable

A form select in where you can search for the items.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormSelect
                v-model="selectedValue"
                :options="options"
                is-searchable
                placeholder="Select an option..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormSelect, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const selectedValue = ref(0);

    const options = [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 },
        { label: 'Option 4', value: 4 },
        { label: 'Option 5', value: 5 },
        { label: 'Option 6', value: 6 }
    ];
</script>

Multiple

A form select in where you can select multiple options.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormSelect
                v-model="selectedValue"
                :options="dataset"
                is-multiple
                placeholder="Select multiple options..."/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const selectedValue = ref([]);
</script>

Read-only

A read-only select that shows its value but cannot be opened or changed.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormField label="Country">
                <FluxFormSelect
                    v-model="selectedValue"
                    is-readonly
                    :options="options"
                    placeholder="Select an option..."/>
            </FluxFormField>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxFormField, FluxFormSelect, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const selectedValue = ref(2);

    const options = [
        { label: 'Belgium', value: 1 },
        { label: 'Germany', value: 2 },
        { label: 'France', value: 3 },
        { label: 'Netherlands', value: 4 },
        { label: 'Spain', value: 5 },
        { label: 'United Kingdom', value: 6 }
    ];
</script>

Used components ​