Taginput

A simple tag input field that can have autocomplete functionality

Examples

Base

Show code

HTML

<section>
    <o-field label="Add some items">
        <o-taginput
            v-model="tags"
            icon="tag"
            placeholder="Add an item"
            aria-close-label="Delete this item" />
    </o-field>

    <p><b>Items:</b> {{ tags }}</p>
</section>

JS

import { ref } from "vue";

const tags = ref(["Pistoia", "Valdinievole"]);

css

Autocomplete

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="allowNew"> Allow new items </o-switch>
        <o-switch v-model="openOnFocus"> Open on focus </o-switch>
    </o-field>

    <o-field label="Enter some items">
        <o-taginput
            v-model="tags"
            :data="filteredTags"
            allow-autocomplete
            :allow-new="allowNew"
            :open-on-focus="openOnFocus"
            field="user.first_name"
            icon="tag"
            placeholder="Add an item"
            @input="getFilteredTags" />
    </o-field>

    <p><b>Items:</b> {{ tags }}</p>
</section>

JS

import { ref } from "vue";

const data = [
    {
        id: 1,
        user: { first_name: "Jesse", last_name: "Simmons" },
        date: "2016/10/15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        user: { first_name: "John", last_name: "Jacobs" },
        date: "2016/12/15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        user: { first_name: "Tina", last_name: "Gilbert" },
        date: "2016/04/26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        user: { first_name: "Clarence", last_name: "Flores" },
        date: "2016/04/10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        user: { first_name: "Anne", last_name: "Lee" },
        date: "2016/12/06 14:38:38",
        gender: "Female",
    },
    {
        id: 6,
        user: { first_name: "Sara", last_name: "Armstrong" },
        date: "2016/09/23 18:50:04",
        gender: "Female",
    },
    {
        id: 7,
        user: { first_name: "Anthony", last_name: "Webb" },
        date: "2016/08/30 23:49:38",
        gender: "Male",
    },
    {
        id: 8,
        user: { first_name: "Andrew", last_name: "Greene" },
        date: "2016/11/20 14:57:47",
        gender: "Male",
    },
    {
        id: 9,
        user: { first_name: "Russell", last_name: "White" },
        date: "2016/07/13 09:29:49",
        gender: "Male",
    },
    {
        id: 10,
        user: { first_name: "Lori", last_name: "Hunter" },
        date: "2016/12/09 01:44:05",
        gender: "Female",
    },
    {
        id: 11,
        user: { first_name: "Ronald", last_name: "Wood" },
        date: "2016/12/04 02:23:48",
        gender: "Male",
    },
    {
        id: 12,
        user: { first_name: "Michael", last_name: "Harper" },
        date: "2016/07/27 13:28:15",
        gender: "Male",
    },
    {
        id: 13,
        user: { first_name: "George", last_name: "Dunn" },
        date: "2017/03/07 12:26:52",
        gender: "Male",
    },
    {
        id: 14,
        user: { first_name: "Eric", last_name: "Rogers" },
        date: "2016/06/07 05:41:52",
        gender: "Male",
    },
    {
        id: 15,
        user: { first_name: "Juan", last_name: "Meyer" },
        date: "2017/02/01 04:56:34",
        gender: "Male",
    },
    {
        id: 16,
        user: { first_name: "Silvia", last_name: "Rosa" },
        date: "2017/01/26 11:50:04",
        gender: "Female",
    },
    {
        id: 17,
        user: { first_name: "Lori", last_name: "Cunningham" },
        date: "2016/05/01 10:00:56",
        gender: "Female",
    },
    {
        id: 18,
        user: { first_name: "Charles", last_name: "Graham" },
        date: "2016/05/31 06:43:30",
        gender: "Male",
    },
    {
        id: 19,
        user: { first_name: "Henry", last_name: "Morrison" },
        date: "2016/09/27 16:15:44",
        gender: "Male",
    },
    {
        id: 20,
        user: { first_name: "Albert", last_name: "Mendoza" },
        date: "2016/08/08 05:29:24",
        gender: "Male",
    },
    {
        id: 21,
        user: { first_name: "Ruby", last_name: "Snyder" },
        date: "2017/04/01 12:04:39",
        gender: "Female",
    },
    {
        id: 22,
        user: { first_name: "Jesse", last_name: "Warren" },
        date: "2016/08/20 01:36:38",
        gender: "Male",
    },
    {
        id: 23,
        user: { first_name: "Carlos", last_name: "Ferguson" },
        date: "2016/05/31 10:40:29",
        gender: "Male",
    },
    {
        id: 24,
        user: { first_name: "Melissa", last_name: "Peters" },
        date: "2016/07/23 00:41:54",
        gender: "Female",
    },
    {
        id: 25,
        user: { first_name: "Arthur", last_name: "Garza" },
        date: "2017/03/11 14:11:37",
        gender: "Male",
    },
    {
        id: 26,
        user: { first_name: "Joe", last_name: "Berry" },
        date: "2016/07/09 15:16:56",
        gender: "Male",
    },
    {
        id: 27,
        user: { first_name: "Joseph", last_name: "Bishop" },
        date: "2016/10/04 19:44:54",
        gender: "Male",
    },
    {
        id: 28,
        user: { first_name: "Sarah", last_name: "Harper" },
        date: "2016/09/23 05:09:11",
        gender: "Female",
    },
    {
        id: 29,
        user: { first_name: "Christopher", last_name: "Fuller" },
        date: "2016/04/12 00:05:35",
        gender: "Male",
    },
    {
        id: 30,
        user: { first_name: "Alan", last_name: "Mendoza" },
        date: "2016/04/22 10:48:02",
        gender: "Male",
    },
    {
        id: 31,
        user: { first_name: "James", last_name: "Davis" },
        date: "2017/01/16 15:17:03",
        gender: "Male",
    },
    {
        id: 32,
        user: { first_name: "Scott", last_name: "Welch" },
        date: "2016/10/04 23:31:51",
        gender: "Male",
    },
    {
        id: 33,
        user: { first_name: "Mildred", last_name: "Myers" },
        date: "2016/11/23 13:46:18",
        gender: "Female",
    },
    {
        id: 34,
        user: { first_name: "Victor", last_name: "Martinez" },
        date: "2016/04/06 17:05:07",
        gender: "Male",
    },
    {
        id: 35,
        user: { first_name: "Susan", last_name: "Medina" },
        date: "2016/12/09 10:33:37",
        gender: "Female",
    },
    {
        id: 36,
        user: { first_name: "Judy", last_name: "Long" },
        date: "2016/07/26 16:19:04",
        gender: "Female",
    },
    {
        id: 37,
        user: { first_name: "Joan", last_name: "Myers" },
        date: "2016/09/22 04:55:54",
        gender: "Female",
    },
    {
        id: 38,
        user: { first_name: "Rachel", last_name: "Gonzales" },
        date: "2016/07/15 13:56:38",
        gender: "Female",
    },
    {
        id: 39,
        user: { first_name: "Roger", last_name: "Hunt" },
        date: "2016/08/14 10:43:11",
        gender: "Male",
    },
    {
        id: 40,
        user: { first_name: "Dorothy", last_name: "Howard" },
        date: "2016/06/19 05:34:49",
        gender: "Female",
    },
    {
        id: 41,
        user: { first_name: "Eugene", last_name: "Lynch" },
        date: "2016/12/24 08:19:24",
        gender: "Male",
    },
    {
        id: 42,
        user: { first_name: "Kathy", last_name: "Webb" },
        date: "2017/04/01 21:09:05",
        gender: "Female",
    },
    {
        id: 43,
        user: { first_name: "Antonio", last_name: "White" },
        date: "2017/02/10 06:51:20",
        gender: "Male",
    },
    {
        id: 44,
        user: { first_name: "Louis", last_name: "Spencer" },
        date: "2016/10/08 02:20:22",
        gender: "Male",
    },
    {
        id: 45,
        user: { first_name: "Andrea", last_name: "Marshall" },
        date: "2016/09/04 10:59:57",
        gender: "Female",
    },
    {
        id: 46,
        user: { first_name: "Eugene", last_name: "Sims" },
        date: "2017/03/15 06:39:48",
        gender: "Male",
    },
    {
        id: 47,
        user: { first_name: "Mildred", last_name: "Gibson" },
        date: "2016/04/18 06:43:54",
        gender: "Female",
    },
    {
        id: 48,
        user: { first_name: "Joan", last_name: "Arnold" },
        date: "2016/12/16 04:52:23",
        gender: "Female",
    },
    {
        id: 49,
        user: { first_name: "Jesse", last_name: "Schmidt" },
        date: "2016/06/11 02:44:33",
        gender: "Male",
    },
    {
        id: 50,
        user: { first_name: "David", last_name: "Frazier" },
        date: "2017/02/15 21:46:30",
        gender: "Male",
    },
    {
        id: 51,
        user: { first_name: "Nicholas", last_name: "Howell" },
        date: "2016/11/01 15:08:31",
        gender: "Male",
    },
    {
        id: 52,
        user: { first_name: "Douglas", last_name: "Chapman" },
        date: "2017/02/08 03:33:24",
        gender: "Male",
    },
    {
        id: 53,
        user: { first_name: "Bruce", last_name: "Simmons" },
        date: "2016/07/14 12:11:17",
        gender: "Male",
    },
    {
        id: 54,
        user: { first_name: "Antonio", last_name: "George" },
        date: "2016/11/07 19:12:55",
        gender: "Male",
    },
    {
        id: 55,
        user: { first_name: "Chris", last_name: "Marshall" },
        date: "2016/07/03 12:11:45",
        gender: "Male",
    },
    {
        id: 56,
        user: { first_name: "Ashley", last_name: "Hudson" },
        date: "2016/10/14 21:08:05",
        gender: "Female",
    },
    {
        id: 57,
        user: { first_name: "Alan", last_name: "Edwards" },
        date: "2017/03/22 21:10:25",
        gender: "Male",
    },
    {
        id: 58,
        user: { first_name: "George", last_name: "Clark" },
        date: "2016/04/28 03:15:05",
        gender: "Male",
    },
    {
        id: 59,
        user: { first_name: "Frank", last_name: "Porter" },
        date: "2016/09/08 00:48:14",
        gender: "Male",
    },
    {
        id: 60,
        user: { first_name: "Christopher", last_name: "Palmer" },
        date: "2016/05/24 08:58:12",
        gender: "Male",
    },
];

const filteredTags = ref(data);

function getFilteredTags(text) {
    filteredTags.value = data.filter(
        (option) =>
            option.user.first_name
                .toString()
                .toLowerCase()
                .indexOf(text.toLowerCase()) >= 0,
    );
}

const tags = ref([]);

const allowNew = ref(false);
const openOnFocus = ref(false);

css

Custom selected

Show code

HTML

<section>
    <o-field label="Enter some items">
        <o-taginput
            ref="input"
            v-model="items"
            icon="tag"
            placeholder="Add an item">
            <template #selected="{ items, removeItem }">
                <o-button
                    v-for="(item, index) in items"
                    :key="index"
                    :label="item"
                    native-type="button"
                    :variant="getType(item)"
                    rounded
                    @click="removeItem(index, $event)" />
            </template>
        </o-taginput>
    </o-field>

    <p><b>Items:</b> {{ items }}</p>
</section>

JS

import { ref } from "vue";

const items = ref([]);

function getType(item) {
    const random = "Z".charCodeAt(0) - item.toUpperCase().charCodeAt(0);
    if (random >= 1 && random < 5) {
        return "primary";
    } else if (random >= 6 && random < 10) {
        return "danger";
    } else if (random >= 11 && random < 15) {
        return "warning";
    } else if (random >= 15 && random < 20) {
        return "success";
    } else if (random >= 20 && random < 25) {
        return "info";
    }
}

css

Limits

Show code

HTML

<section>
    <o-field label="Limited to 10 characters">
        <o-taginput
            :maxlength="10"
            :model-value="['Oruga', 'Vue', 'CSS']" />
    </o-field>

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

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

js

css

Variants

Show code

HTML

<section>
    <o-field label="Primary">
        <o-taginput
            :model-value="['One']"
            :data="['One', 'Two', 'Three', 'Four']"
            :allow-new="false"
            variant="primary" />
    </o-field>

    <o-field label="Success">
        <o-taginput
            :model-value="['One']"
            :data="['One', 'Two', 'Three', 'Four']"
            :allow-new="false"
            variant="success" />
    </o-field>

    <o-field label="Info">
        <o-taginput
            :model-value="['One']"
            :data="['One', 'Two', 'Three', 'Four']"
            :allow-new="false"
            variant="info" />
    </o-field>

    <o-field label="Warning">
        <o-taginput
            :model-value="['One']"
            :data="['One', 'Two', 'Three', 'Four']"
            :allow-new="false"
            variant="warning" />
    </o-field>

    <o-field label="Danger">
        <o-taginput
            :model-value="['One']"
            :data="['One', 'Two', 'Three', 'Four']"
            :allow-new="false"
            variant="danger" />
    </o-field>
</section>

js

css

Class props

'Classes applied to the element'

Taginput component

A simple tag input field that can have autocomplete functionality

<o-taginput></o-taginput>

Props

Prop name	Description	Type	Values	Default
allowAutocomplete	Add autocomplete feature (if true, any Autocomplete props may be used too)	boolean	-	false
allowDuplicates	Allows adding the same item multiple time	boolean	-	false
allowNew	When autocomplete, it allow to add new items	boolean	-	false
ariaCloseLabel	Accessibility label for the close button	string	-	From config: taginput: {   ariaCloseLabel: undefined }
autocomplete	Native options to use in HTML5 validation	string	-	From config: taginput: {   autocomplete: "off" }
beforeAdding	Function to validate the value of the item before adding	(value: T | string) => boolean	-	Default function (see source code)
checkScroll	Makes the component check if list reached scroll start or end and emit scroll events.	boolean	-	From config: taginput: {   checkScroll: false }
closable	Add close/delete button to the item	boolean	-	From config: taginput: {   closable: true }
closeIcon	Icon name of close icon on selected item	string	-	From config: taginput: {   closeIcon: "close" }
confirmKeys	Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a item when typing	string[]	-	From config: taginput: {   confirmKeys: [",","Tab","Enter"] }
counter	Show counter when maxlength or maxtags props are passed	boolean	-	From config: taginput: {   counter: true }
createItem	Function to create a new item to push into v-model (items)	(value: T | string) => T	-	Default function (see source code)
data	Items data	T[]	-	Default function (see source code)
disabled	Same as native input disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
field	Property of the object (if data is array of objects) to use as display text	string	-	"value"
groupField	Property of the object (if data is array of objects) to use as display text of group	string	-
groupOptions	Property of the object (if data is array of objects) to use as key to get items array of each group	string	-
icon	Icon to be shown	string	-	From config: taginput: {   icon: undefined }
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: taginput: {   iconPack: undefined }
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-	false
keepOpen	Keep open dropdown list after select	boolean	-	From config: autocomplete: {   keepOpen: false }
maxitems	Limits the number of items, plus item counter	string|number	-
maxlength	Same as native maxlength, plus character counter	string|number	-
openOnFocus	Opens a dropdown with choices when the input field is focused	boolean	-	false
override	Override existing theme classes completely	boolean	-
placeholder	Input placeholder	string	-
removeOnKeys	Allow removing last item when pressing given keys, if input is empty	string[]	-	From config: taginput: {   removeOnKeys: ["Backspace"] }
separators	Array of chars used to split when pasting a new string	string[]	-	From config: taginput: {   separators: [","] }
size	Vertical size of the input control	string	small, medium, large	From config: taginput: {   size: undefined }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean|string|object	-	From config: taginput: {   teleport: false }
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
v-model		T[]	-	Default function (see source code)
validationMessage	The message which is shown when a validation error occurs	string	-
variant	Color of the each item	string	primary, info, success, warning, danger, and any other custom color	From config: taginput: {   variant: undefined }

Events

Event name	Properties	Description
scroll-start		the list inside the dropdown reached the start
scroll-end		the list inside the dropdown reached it's end
icon-click	event Event - native event	on icon click event
icon-right-click	event Event - native event	on icon right click event
update:modelValue	value (string | number | object)[] - updated modelValue prop	modelValue prop two-way binding
input	value String - input value	on input change event
add	value string | number | object - added item	new item got added
remove	value string | number | object - removed item	item got removed
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
selected	Override selected items	items unknown[] - selected items
header	Define an additional header
default	Override the select option	option object - option object index number - option index value unknown - option value
empty	Define content for empty state
footer	Define an additional footer
counter	Override the counter	items number - items count total number - total count

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$taginput-background-color	$input-background-color
$taginput-height	calc(2em - 1px)
$taginput-padding	calc(0.275em - 1px) 0 0
$taginput-border-color	$grey-lighter
$taginput-border-style	solid
$taginput-border-width	1px
$taginput-border-radius	$base-border-radius
$taginput-color	#363636
$taginput-line-height	$base-line-height
$taginput-box-shadow	inset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$taginput-max-width	100%
$taginput-width	100%
$taginput-counter-font-size	0.75rem
$taginput-counter-margin	0.25rem 0 0 0.5rem
$taginput-item-background-color	$primary
$taginput-item-color	$primary-invert
$taginput-item-border-radius	$base-border-radius
$taginput-item-margin	0 0 0 0.275em
$taginput-item-padding	0 0.75em 0 0.75em
$taginput-margin-icon-to-text	0.1875em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$taginput-background-color	$input-background-color
$taginput-height	calc(2em - 1px)
$taginput-padding	calc(0.275em - 1px) 0 0
$taginput-border-color	$grey-lighter
$taginput-border-style	solid
$taginput-border-width	1px
$taginput-border-radius	$base-border-radius
$taginput-color	#363636
$taginput-line-height	$base-line-height
$taginput-box-shadow	inset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$taginput-max-width	100%
$taginput-width	100%
$taginput-counter-font-size	0.75rem
$taginput-counter-margin	0.25rem 0 0 0.5rem
$taginput-item-background-color	$primary
$taginput-item-color	$primary-invert
$taginput-item-border-radius	$base-border-radius
$taginput-item-margin	0 0 0 0.275em
$taginput-item-padding	0 0.75em 0 0.75em
$taginput-margin-icon-to-text	0.1875em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$taginput-badge-bg	$light
$taginput-badge-color	$dark
$taginput-badge-font-size	0.9em
$taginput-badge-margin	0.25em
$taginput-badge-icon-space	0.25em
$taginput-counter-margin	0.25rem 0 0 0.5rem
$taginput-counter-font-size	0.75rem

See ➜ 📄 Full scss file