Taginput

A simple tag input field that can have autocomplete functionality

Auckland Wellington Very long string that would overflow

Tags: [ "Auckland", "Wellington", "Very long string that would overflow" ]

<template>
    <section>
        <b-field label="Add some tags">
            <b-taginput
                v-model="tags"
                ellipsis
                icon="label"
                placeholder="Add a tag">
            </b-taginput>
        </b-field>
        <p class="content"><b>Tags:</b> {{ tags }}</p>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                tags: [
                    'Auckland',
                    'Wellington',
                    'Very long string that would overflow'
                ]
            }
        }
    }
</script>


# Autocomplete

To have autocomplete functionality, add the autocomplete prop. You can add any prop from Autocomplete API.

<template>
    <section>
        <div class="block">
            <b-switch v-model="allowNew">
                Allow new tags
            </b-switch>
            <b-switch v-model="openOnFocus">
                Open on focus
            </b-switch>
        </div>
        <b-field label="Enter some tags">
            <b-taginput
                v-model="tags"
                :data="filteredTags"
                autocomplete
                :allow-new="allowNew"
                :open-on-focus="openOnFocus"
                field="user.first_name"
                icon="label"
                placeholder="Add a tag"
                @typing="getFilteredTags">
            </b-taginput>
        </b-field>
        <pre style="max-height: 400px"><b>Tags:</b>{{ tags }}</pre>
    </section>
</template>

<script>
    const data = require('@/data/sample.json')

    export default {
        data() {
            return {
                filteredTags: data,
                isSelectOnly: false,
                tags: [],
                allowNew: false,
                openOnFocus: false
            }
        },
        methods: {
            getFilteredTags(text) {
                this.filteredTags = data.filter((option) => {
                    return option.user.first_name
                        .toString()
                        .toLowerCase()
                        .indexOf(text.toLowerCase()) >= 0
                })
            }
        }
    }
</script>


# Templated Autocomplete

Slots are available for autocomplete items and the empty message, like with the Autocomplete control.

<template>
    <section>
        <b-field label="Enter some tags">
            <b-taginput
                v-model="tags"
                :data="filteredTags"
                autocomplete
                field="user.first_name"
                icon="label"
                placeholder="Add a tag"
                @typing="getFilteredTags">
                <template slot-scope="props">
                    <strong>{{props.option.id}}</strong>: {{props.option.user.first_name}}
                </template>
                <template slot="empty">
                    There are no items
                </template>
            </b-taginput>
        </b-field>
        <pre style="max-height: 400px"><b>Tags:</b>{{ tags }}</pre>
    </section>
</template>

<script>
    const data = require('@/data/sample.json')

    export default {
        data() {
            return {
                filteredTags: data,
                isSelectOnly: false,
                tags: []
            }
        },
        methods: {
            getFilteredTags(text) {
                this.filteredTags = data.filter((option) => {
                    return option.user.first_name
                        .toString()
                        .toLowerCase()
                        .indexOf(text.toLowerCase()) >= 0
                })
            }
        }
    }
</script>


# Custom selected

You can have a custom template by adding selected scoped slot to it.

<template>
    <section>
        <b-field label="Enter some tags">
            <b-taginput
                v-model="tags"
                :data="filteredTags"
                autocomplete
                ref="taginput"
                icon="label"
                placeholder="Add a tag"
                @typing="getFilteredTags">
                <template slot-scope="props">
                    <strong>{{props.option.id}}</strong>: {{props.option.user.first_name}}
                </template>
                <template slot="empty">
                    There are no items
                </template>
                <template slot="selected" slot-scope="props">
                    <b-tag
                        v-for="(tag, index) in props.tags"
                        :key="index"
                        :type="getType(tag)"
                        rounded
                        :tabstop="false"
                        ellipsis
                        closable
                        @close="$refs.taginput.removeTag(index, $event)">
                        {{tag.user.first_name}}
                    </b-tag>
                </template>
            </b-taginput>
        </b-field>
        <pre style="max-height: 400px"><b>Tags:</b>{{ tags }}</pre>
    </section>
</template>

<script>
    const data = require('@/data/sample.json')

    export default {
        data() {
            return {
                filteredTags: data,
                isSelectOnly: false,
                tags: []
            }
        },
        methods: {
            getFilteredTags(text) {
                this.filteredTags = data.filter((option) => {
                    return option.user.first_name
                        .toString()
                        .toLowerCase()
                        .indexOf(text.toLowerCase()) >= 0
                })
            },
            getType(tag) {
                if (tag.id >= 1 && tag.id < 10) {
                    return 'is-primary'
                } else if (tag.id >= 10 && tag.id < 20) {
                    return 'is-danger'
                } else if (tag.id >= 20 && tag.id < 30) {
                    return 'is-warning'
                } else if (tag.id >= 30 && tag.id < 40) {
                    return 'is-success'
                } else if (tag.id >= 40 && tag.id < 50) {
                    return 'is-info'
                }
            }
        }
    }
</script>


# Limits

You can limit the length and number of tags with the maxlength and maxtags props. Maxlength counter is only shown when typing.

Bulma Vue Buefy
One Two Three Four
4 / 5
Red Green Blue White
4 / 5
<template>
    <section>
        <b-field label="Limited to 10 characters">
            <b-taginput
                maxlength="10"
                :value="['Bulma', 'Vue', 'Buefy']">
            </b-taginput>
        </b-field>

        <b-field label="Limited to 5 tags">
            <b-taginput
                maxtags="5"
                :value="['One', 'Two', 'Three', 'Four']">
            </b-taginput>
        </b-field>

        <b-field label="Limited to 10 characters and 5 tags">
            <b-taginput
                maxlength="10"
                maxtags="5"
                :value="['Red', 'Green', 'Blue', 'White']">
            </b-taginput>
        </b-field>
    </section>
</template>

# States

You can change the input type setting a type on Field.

Tag
Tag
Tag
Tag
Tag
Tag
<template>
    <section>
        <b-field
            label="Success"
            type="is-success">
            <b-taginput
                :value="['Tag']">
            </b-taginput>
        </b-field>

        <b-field
            label="Error"
            type="is-danger">
            <b-taginput
                :value="['Tag']">
            </b-taginput>
        </b-field>

        <b-field
            label="Info"
            type="is-info">
            <b-taginput
                :value="['Tag']">
            </b-taginput>
        </b-field>

        <b-field
            label="Warning"
            type="is-warning">
            <b-taginput
                :value="['Tag']">
            </b-taginput>
        </b-field>

        <b-field label="Disabled">
            <b-taginput
                :value="['Tag']"
                disabled>
            </b-taginput>
        </b-field>

        <b-field label="Loading">
            <b-taginput
                :value="['Tag']"
                loading>
            </b-taginput>
        </b-field>
    </section>
</template>

# Tag types

Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
<template>
    <section>
        <b-field label="Dark">
            <b-taginput
                v-model="tags"
                type="is-dark">
            </b-taginput>
        </b-field>

        <b-field label="Info">
            <b-taginput
                v-model="tags"
                type="is-info">
            </b-taginput>
        </b-field>

        <b-field label="Success">
            <b-taginput
                v-model="tags"
                type="is-success">
            </b-taginput>
        </b-field>

        <b-field label="Warning">
            <b-taginput
                v-model="tags"
                type="is-warning">
            </b-taginput>
        </b-field>

        <b-field label="Danger">
            <b-taginput
                v-model="tags"
                type="is-danger">
            </b-taginput>
        </b-field>

        <b-field label="Close Type">
            <b-taginput
                v-model="tags"
                type="is-dark"
                close-type="is-danger">
            </b-taginput>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                tags: [
                    'Auckland',
                    'Wellington',
                    'Napier'
                ]
            }
        }
    }
</script>

# Sizes

Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
Auckland Wellington Napier
<template>
    <section>
        <b-field label="Small">
            <b-taginput
                v-model="tags"
                size="is-small">
            </b-taginput>
        </b-field>

        <b-field label="Default">
            <b-taginput
                v-model="tags">
            </b-taginput>
        </b-field>

        <b-field label="Medium">
            <b-taginput
                v-model="tags"
                size="is-medium">
            </b-taginput>
        </b-field>

        <b-field label="Large">
            <b-taginput
                v-model="tags"
                size="is-large">
            </b-taginput>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                tags: [
                    'Auckland',
                    'Wellington',
                    'Napier'
                ]
            }
        }
    }
</script>

# Modifiers

You can change the style of the tags by setting the rounded and attached props.

Auckland Wellington Napier
Auckland
Wellington
Napier
<template>
    <section>
        <b-field label="Rounded">
            <b-taginput
                v-model="tags"
                rounded>
            </b-taginput>
        </b-field>

        <b-field label="Attached">
            <b-taginput
                v-model="tags"
                attached>
            </b-taginput>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                tags: [
                    'Auckland',
                    'Wellington',
                    'Napier'
                ]
            }
        }
    }
</script>

# Validation

You can validate the value before adding it to the tag list

123 456 789
<template>
    <section>
        <b-field label="Tags with 3 characters">
            <b-taginput
                v-model="tags" 
                :before-adding="beforeAdding">
            </b-taginput>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                tags: [
                    '123',
                    '456',
                    '789'
                ]
            }
        },
        methods: {
        	beforeAdding(tag) {
        		return tag.length === 3;
        	},
        },
    }
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueArray, Array, Array
maxlengthLimits the length of each tag, plus character counterString, Number
maxtagsLimits the number of tags, plus tag counterString, Number
has-counterShow counter when maxlength or maxtags props are passedBooleantrue
typeType (color) of the tags, optionalStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sassis-light
closeTypeType (color) of the close icon, optionalStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass-
sizeTag and input size, optionalStringis-small, is-medium, is-large
roundedMakes the tags rounded, optionalBooleanfalse
attachedMakes the tags attached instead of having an appended delete button, optionalBooleanfalse
ellipsisAdds ellipsis on tags to not overflow the text. Title is then added to the tag with full textBooleanfalse
closableAdd close/delete button to the tagBooleantrue
fieldProperty of the object (if data is array of objects) to use as display textStringvalue
autocompleteAdd autocomplete feature (if true, any Autocomplete props may be used too)Booleanfalse
group-fieldProperty of the object (if data is array of objects) to use as display text of groupString
group-optionsProperty of the object (if data is array of objects) to use as key to get items array of each group, optionalString
allow-newWhen autocomplete, it allow to add new tagsBooleanfalse
open-on-focusOpens a dropdown with choices when the input field is focusedBooleanfalse
remove-on-keysAllow removing last tag when pressing given keys, if input is emptyArray["Backspace"]
confirm-keysArray of key (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default comma and enter)Array[",", "Enter"]
on-paste-separatorsArray of chars used to split when pasting a new stringArray[',']
before-addingFunction to validate the value of the tag before addingFunction(tagToAdd) => true
allow-duplicatesAllows adding the same tag multiple timesBooleanfalse
create-tagFunction to create tag item to push into v-model (tags)Function(tagToAdd) => tagToAdd
readonlyDisable input/typingBooleanfalse
check-infinite-scrollMakes the autocomplete component check if list reached scroll end and emit infinite-scroll event.Booleanfalse
append-to-bodyAppend autocomplete content to bodyBooleanfalse
Any other native attribute

# Variables

You can use these variables to customize this component.

Name
Default
$taginput-heightcalc(2em - 1px)

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub