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.

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.

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

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.

Select an option...

<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.

Select an option...

<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.

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 ​