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>
        </div>
        <b-field label="Enter some tags">
            <b-taginput
                v-model="tags"
                :data="filteredTags"
                autocomplete
                :allow-new="allowNew"
                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
            }
        },
        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>


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
<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>
    </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 value Array<String>, Array<Number>, Array<Object>
maxlengthLimits the length of each tag, plus character counter String, Number
maxtagsLimits the number of tags, plus tag counter String, Number
typeType (color) of the tags, optional String is-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
sizeTag and input size, optional String is-small, is-medium, is-largeis-medium
roundedMakes the tags rounded, optional Boolean false
attachedMakes the tags attached instead of having an appended delete button, optional Boolean false
ellipsisAdds ellipsis on tags to not overflow the text Boolean false
closableAdd close/delete button to the tag Boolean true
fieldProperty of the object (if data is array of objects) to use as display text String value
autocompleteAdd autocomplete feature Boolean false
allow-newWhen autocomplete, it allow to add new tags Boolean false
remove-on-keysAllow removing last tag when pressing given keys, if input is empty Array [8]
confirm-key-codesArray of key codes which will add a tag when typing (default comma, enter and tab) Array [13, 188, 9]
on-paste-separatorsArray of chars used to split when pasting a new string Array [',']
before-addingFunction to validate the value of the tag before adding Function () => true
allow-duplicatesAllows adding the same tag multiple times Boolean false
readonlyDisable input/typing Boolean false
Any other native attribute or Autocomplete prop

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

Improve this page on GitHub