Flux

Tags input ​

The Tags input component 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.

design
frontend

Props

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

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>

Used components ​