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"
            allow-new
            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"]);

Autocomplete

Show code

HTML

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="allowNew">Allow new items</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="allowDuplicates">Allow duplicates</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="keepFirst">Keep first</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="openOnFocus">Open on focus</o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="keepOpen">Keep open</o-switch>
        </o-field>
    </o-field>

    <o-field label="Enter some items">
        <o-taginput
            v-model="tags"
            :options="options"
            :allow-new="allowNew"
            :allow-duplicates="allowDuplicates"
            :open-on-focus="openOnFocus"
            :keep-open="keepOpen"
            :keep-first="keepFirst"
            field="user.first_name"
            icon="tag"
            placeholder="Add an item"
            expanded />
    </o-field>

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

JS

import { ref } from "vue";

const options = [
    {
        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",
    },
];

const tags = ref([]);

const allowNew = ref(false);
const allowDuplicates = ref(false);
const openOnFocus = ref(false);
const keepFirst = ref(false);
const keepOpen = ref(true);

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"
            allow-new>
            <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<string[]>([]);

function getType(item: string): string {
    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";
    }
}

Limits

Show code

HTML

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

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

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

Disabled

Show code

HTML

<o-field label="Disabled">
    <o-taginput
        :model-value="['One']"
        :data="['One', 'Two', 'Three', 'Four']"
        variant="primary"
        placeholder="Add an item"
        icon="tag"
        disabled
        expanded />
</o-field>

Variants

Show code

HTML

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

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

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

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

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

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

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
allowDuplicates	Allows adding the same item multiple time	boolean	-	From config: taginput: {   allowDuplicates: false }
allowNew	Allows adding new items	boolean	-	From config: taginput: {   allowNew: 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" }
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)
customValidity	Custom HTML 5 validation error to set on the form control	| string | (( currentValue: T[] | null | undefined, state: ValidityState, ) => string)	-	""
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"
filter	Function to filter the options based on the input value - default is display text comparison	(options: T[], value: string) => T[]	-
formatter	Function to format an option to a string for display it in the input (as alternative to field prop)	(value: unknown, option: T) => string	-
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: taginput: {   keepOpen: false }
maxitems	Limits the number of items, plus item counter	string|number	-
maxlength	Same as native maxlength, plus character counter	string|number	-
v-model	The input value state	string[]|object[]	-	Default function (see source code)
openOnFocus	Opens a dropdown with choices when the input field is focused	boolean	-	false
options	Items data	string[]|object[]	-	Default function (see source code)
override	Override existing theme classes completely	boolean	-
placeholder	Input placeholder	string	-
removeOnKeys	Allow removing last item when pressing given keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values), 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 }
validateItem	Function to validate the value of a new item before it got added	(value: T | string) => boolean	-	Default function (see source code)
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[] | object[] - updated modelValue prop	modelValue prop two-way binding
input	value string - input value	on input change event
add	value string | object - added item	new item got added
remove	value string | 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 (string, object)[] - 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

SASS Variable	Default
$taginput-counter-font-size	0.75rem
$taginput-counter-margin	0.25rem 0 0 0.5rem
$taginput-item-background-color	var(--#{$prefix}primary)
$taginput-item-color	var(--#{$prefix}primary-invert)
$taginput-item-border-radius	var(--#{$prefix}base-border-radius)
$taginput-item-margin	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

SASS Variable	Default
$taginput-height	2em
$taginput-tag-size	0.9em

See ➜ 📄 Full scss file

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