Flux

Appearance

Select ​

This is a form select element that allows the user to choose from a list of options. It is similar to a drop-down menu, but with more advanced functionality. The select element can be configured to allow for the selection of multiple values, which is useful when the user needs to select more than one option. It's a great option for forms that require multiple selections, such as when a user needs to choose multiple interests, hobbies, or preferences.

Required icons

angle-down
magnifying-glass

Props

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

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-condensed?: boolean
Renders the select in a compact style with reduced padding.

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: FluxFormSelectOption[]
The options to display in the select element.

Emits

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

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>

Used components ​