Taginput

A simple tag input field that can have autocomplete functionality

Add some tags

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"
                aria-close-label="Delete this 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.

Allow new tags Open on focus

Tags:[]

<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 v-slot="props">
                    <strong>{{props.option.id}}</strong>: {{props.option.user.first_name}}
                </template>
                <template #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 #empty>
                    There are no items
                </template>
                <template #selected="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.

Limited to 10 characters

Bulma Vue Buefy

Limited to 5 tags

One Two Three Four

4 / 5

Limited to 10 characters and 5 tags

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.

Success

Tag

Error

Tag

Info

Tag

Warning

Tag

Disabled

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

Dark

Auckland Wellington Napier

Info

Auckland Wellington Napier

Success

Auckland Wellington Napier

Warning

Auckland Wellington Napier

Danger

Auckland Wellington Napier

Close Type

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

Small

Auckland Wellington Napier

Default

Auckland Wellington Napier

Medium

Auckland Wellington Napier

Large

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.

Rounded

Auckland Wellington Napier

Attached

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

Tags with 3 characters

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-model`	Binding value	Array, Array, Array	—	—
`maxlength`	Limits the length of each tag, plus character counter	String, Number	—	—
`maxtags`	Limits the number of tags, plus tag counter	String, Number	—	—
`has-counter`	Show counter when `maxlength` or `maxtags` props are passed	Boolean	—	`true`
`type`	Type (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 Sass	`is-light`
`closeType`	Type (color) of the close icon, 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 Sass	-
`size`	Tag and input size, optional	String	`is-small`, `is-medium`, `is-large`	—
`rounded`	Makes the tags rounded, optional	Boolean	—	`false`
`attached`	Makes the tags attached instead of having an appended delete button, optional	Boolean	—	`false`
`ellipsis`	Adds ellipsis on tags to not overflow the text. Title is then added to the tag with full text	Boolean	—	`false`
`closable`	Add close/delete button to the tag	Boolean	—	`true`
`aria-close-label`	Accessibility label for the close button	String	—	-
`field`	Property of the object (if `data` is array of objects) to use as display text	String	—	`value`
`autocomplete`	Add autocomplete feature (if `true`, any Autocomplete props may be used too)	Boolean	—	`false`
`group-field`	Property of the object (if `data` is array of objects) to use as display text of group	String	—
`group-options`	Property of the object (if `data` is array of objects) to use as key to get items array of each group, optional	String	—
`allow-new`	When `autocomplete`, it allow to add new tags	Boolean	—	`false`
`open-on-focus`	Opens a dropdown with choices when the input field is focused	Boolean	—	`false`
`remove-on-keys`	Allow removing last tag when pressing given keys, if input is empty	Array	—	`["Backspace"]`
`confirm-keys`	Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default comma, tab and enter)	Array	—	`[",", "Tab", "Enter"]`
`on-paste-separators`	Array of chars used to split when pasting a new string	Array	—	`[',']`
`before-adding`	Function to validate the value of the tag before adding	Function	—	`(tagToAdd) => true`
`allow-duplicates`	Allows adding the same tag multiple times	Boolean	—	`false`
`create-tag`	Function to create tag item to push into v-model (tags)	Function	—	`(tagToAdd) => tagToAdd`
`readonly`	Disable input/typing	Boolean	—	`false`
`check-infinite-scroll`	Makes the autocomplete component check if list reached scroll end and emit `infinite-scroll` event.	Boolean	—	`false`
`append-to-body`	Append autocomplete content to body (prevents event bubbling)	Boolean	—	`false`
Any other native attribute	—	—	—	—

Slot name	Description	Props (if scoped)
default		`option: String\|Object`, `index: Number`
`empty`	Show like an option if `data` array prop is empty	—
`header`	Show a custom header as first option	—
`footer`	Show a custom footer as last option	—
`tag`	For customizing content in tag item.	`tag: String\|Number\|Object`
`selected`	For customizing content of selected item.	`tags: Array`

Name	Description	Parameters
`input`	Triggers when tags are added/removed	`value: Array`
`typing`	User started typing a tag	`value: String`
`add`	Triggers when a tag has been added	`value: String\|Object`
`remove`	Triggers when a tag has been removed	`value: String\|Object`
`infinite-scroll`	Triggers when the autocomplete `.dropdown-list` has reached scroll end	—

# Variables

You can use these variables to customize this component.

Name	Default
`$taginput-height`	`calc(2em - 1px)`

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

Improve this page on GitHub