Flux

Tags input ​

The tags input lets users build a list of tags by typing and committing each value, for example to assign keywords or labels. Values are committed on Enter or a comma (configurable), pasted text is split into multiple tags, and Backspace on an empty input removes the last tag. When suggestions are provided, a filtered dropdown is shown while typing.

INFO

Picking a suggestion stores its value (as a string) when one is set, falling back to the label otherwise. This keeps the bound v-model made up of stable identifiers rather than display text. The input is exposed as a role="combobox" and links the highlighted suggestion through aria-activedescendant.

design
frontend

Props

model-value: string[]
The list of tags.

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

allow-duplicates?: boolean
Whether duplicate tags are allowed.

delimiters?: string[]
The keys that commit the current input as a tag.
Default: ['Enter', ',']

disabled?: boolean
Whether the input is disabled.

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

max?: number
The maximum number of tags.

placeholder?: string
Placeholder shown when there are no tags.

suggestions?: FluxFormSelectOption[]
Optional suggestions shown in a dropdown while typing.

tag-color?: FluxColor
The color of the tags.

validate?: ( value: string ) => boolean
A function that returns whether a value is a valid tag.

Emits

update:model-value: [string[]]
Triggered when the list of tags changes.

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

add: [string]
Triggered when a tag is added, with the tag value.

remove: [string]
Triggered when a tag is removed, with the tag value.

Examples ​

Basic

A basic tags input.

<template>
    <FluxFormTagsInput
        v-model="tags"
        :max="5"
        placeholder="Up to 5 tags"/>
</template>

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

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

Suggestions

A tags input with suggestions.

Vue

<template>
    <FluxFormTagsInput
        v-model="tags"
        :suggestions="suggestions"
        placeholder="Add skills"/>
</template>

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

    const tags = ref(['Vue']);

    const suggestions = [
        {label: 'TypeScript', value: 'typescript'},
        {label: 'JavaScript', value: 'javascript'},
        {label: 'CSS', value: 'css'},
        {label: 'HTML', value: 'html'},
        {label: 'Vue', value: 'vue'},
        {label: 'React', value: 'react'}
    ];
</script>

Tag color

Render the tags in a chosen color with tag-color.

design
frontend
vue

<template>
    <FluxFormTagsInput
        v-model="tags"
        tag-color="primary"
        placeholder="Add a tag"/>
</template>

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

    const tags = ref(['design', 'frontend', 'vue']);
</script>

Validation

Only accept valid entries by passing a validate function.

bas@example.com

<template>
    <FluxFormTagsInput
        v-model="emails"
        :validate="validate"
        placeholder="Add email addresses"/>
</template>

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

    const emails = ref(['bas@example.com']);

    function validate(value: string): boolean {
        return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value);
    }
</script>

Custom delimiters

Commit tags on a space or comma in addition to Enter.

<template>
    <FluxFormTagsInput
        v-model="tags"
        :delimiters="[' ', ',']"
        placeholder="Separate tags with a space or comma"/>
</template>

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

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

Disabled

A disabled tags input with existing tags.

design
frontend

<template>
    <FluxFormTagsInput
        v-model="tags"
        disabled/>
</template>

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

    const tags = ref(['design', 'frontend']);
</script>

Used components ​