Flux

Combobox ​

The Combobox component is a searchable select. With is-creatable enabled it also lets users add entries that are not in the list, by typing a value and pressing Enter or clicking the "Create" option. Created entries are tracked internally so they appear immediately as selected.

TIP

For a plain, option-bounded select without free-text entry, use Select instead.

Required icons

angle-down
magnifying-glass
plus

Props

disabled?: boolean
Whether the combobox is disabled.

error?: string | null
An error message, putting the combobox in an invalid state.

is-creatable?: boolean
Whether the user can create new entries by typing a value that does not match an existing option.

is-multiple?: boolean
Whether multiple values can be selected.

options: FluxFormSelectEntry[]
The available options.

placeholder?: string
Placeholder shown when nothing is selected.

Emits

update:modelValue: [FluxFormSelectValue]
Triggered when the selection changes.

Examples ​

Basic

A searchable combobox bound to a list of options.

<template>
    <FluxFormCombobox
        v-model="value"
        :options="options"
        placeholder="Select a country"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormCombobox } from '@flux-ui/components';
    import type { FluxFormSelectValue } from '@flux-ui/types';
    import { ref } from 'vue';

    const value = ref<FluxFormSelectValue>(null);

    const options = [
        {label: 'Belgium', value: 'be'},
        {label: 'Germany', value: 'de'},
        {label: 'Netherlands', value: 'nl'},
        {label: 'United Kingdom', value: 'uk'}
    ];
</script>

Creatable

A combobox that allows creating new entries.

<template>
    <FluxFormCombobox
        v-model="value"
        is-creatable
        :options="options"
        placeholder="Pick or create a label"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormCombobox } from '@flux-ui/components';
    import type { FluxFormSelectValue } from '@flux-ui/types';
    import { ref } from 'vue';

    const value = ref<FluxFormSelectValue>(null);

    const options = [
        {label: 'Bug', value: 'bug'},
        {label: 'Feature', value: 'feature'},
        {label: 'Documentation', value: 'documentation'}
    ];
</script>

Multiple

A creatable combobox that allows multiple values.

<template>
    <FluxFormCombobox
        v-model="value"
        is-creatable
        is-multiple
        :options="options"
        placeholder="Add skills"/>
</template>

<script
    setup
    lang="ts">
    import { FluxFormCombobox } from '@flux-ui/components';
    import type { FluxFormSelectValue } from '@flux-ui/types';
    import { ref } from 'vue';

    const value = ref<FluxFormSelectValue>([]);

    const options = [
        {label: 'TypeScript', value: 'typescript'},
        {label: 'Vue', value: 'vue'},
        {label: 'CSS', value: 'css'}
    ];
</script>

Used components ​