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

angles-up-down
magnifying-glass
plus
xmark

Props

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

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

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

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-loading?: boolean
Shows a loading spinner inside the combobox.

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

is-readonly?: boolean
If the combobox is read-only. Blocks opening the popup.

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.

options: FluxFormSelectEntry[]
The available options.

placeholder?: string
Placeholder shown when nothing is selected.

Emits

update:model-value: [FluxFormSelectValue]
Triggered when the selection changes.

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