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" label="Allow new items" />
        </o-field>
        <o-field>
            <o-switch v-model="allowDuplicates" label="Allow duplicates" />
        </o-field>
        <o-field>
            <o-switch v-model="keepFirst" label="Keep first" />
        </o-field>
        <o-field>
            <o-switch v-model="openOnFocus" label="Open on focus" />
        </o-field>
        <o-field>
            <o-switch v-model="keepOpen" label="Keep open" />
        </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"
            icon="tag"
            placeholder="Add an item"
            expanded />
    </o-field>

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

JS

import { ref } from "vue";
import type { OptionsPropItem } from "@oruga-ui/oruga-next";

const options: OptionsPropItem[] = [
    {
        label: "Jesse Simmons",
        value: {
            id: 1,
            user: { first_name: "Jesse", last_name: "Simmons" },
            date: "2016/10/15 13:43:27",
            gender: "Male",
        },
    },
    {
        label: "John Jacobs",
        value: {
            id: 2,
            user: { first_name: "John", last_name: "Jacobs" },
            date: "2016/12/15 06:00:53",
            gender: "Male",
        },
    },
    {
        label: "Tina Gilbert",
        value: {
            id: 3,
            user: { first_name: "Tina", last_name: "Gilbert" },
            date: "2016/04/26 06:26:28",
            gender: "Female",
        },
    },
    {
        label: "Clarence Flores",
        value: {
            id: 4,
            user: { first_name: "Clarence", last_name: "Flores" },
            date: "2016/04/10 10:28:46",
            gender: "Male",
        },
    },
    {
        label: "Anne Lee",
        value: {
            id: 5,
            user: { first_name: "Anne", last_name: "Lee" },
            date: "2016/12/06 14:38:38",
            gender: "Female",
        },
    },
    {
        label: "Sara Armstrong",
        value: {
            id: 6,
            user: { first_name: "Sara", last_name: "Armstrong" },
            date: "2016/09/23 18:50:04",
            gender: "Female",
        },
    },
    {
        label: "Anthony Webb",
        value: {
            id: 7,
            user: { first_name: "Anthony", last_name: "Webb" },
            date: "2016/08/30 23:49:38",
            gender: "Male",
        },
    },
    {
        label: "Andrew Greene",
        value: {
            id: 8,
            user: { first_name: "Andrew", last_name: "Greene" },
            date: "2016/11/20 14:57:47",
            gender: "Male",
        },
    },
    {
        label: "Russell White",
        value: {
            id: 9,
            user: { first_name: "Russell", last_name: "White" },
            date: "2016/07/13 09:29:49",
            gender: "Male",
        },
    },
    {
        label: "Lori Hunter",
        value: {
            id: 10,
            user: { first_name: "Lori", last_name: "Hunter" },
            date: "2016/12/09 01:44:05",
            gender: "Female",
        },
    },
    {
        label: "Ronald Wood",
        value: {
            id: 11,
            user: { first_name: "Ronald", last_name: "Wood" },
            date: "2016/12/04 02:23:48",
            gender: "Male",
        },
    },
    {
        label: "Michael Harper",
        value: {
            id: 12,
            user: { first_name: "Michael", last_name: "Harper" },
            date: "2016/07/27 13:28:15",
            gender: "Male",
        },
    },
    {
        label: "George Dunn",
        value: {
            id: 13,
            user: { first_name: "George", last_name: "Dunn" },
            date: "2017/03/07 12:26:52",
            gender: "Male",
        },
    },
    {
        label: "Eric Rogers",
        value: {
            id: 14,
            user: { first_name: "Eric", last_name: "Rogers" },
            date: "2016/06/07 05:41:52",
            gender: "Male",
        },
    },
    {
        label: "Juan Meyer",
        value: {
            id: 15,
            user: { first_name: "Juan", last_name: "Meyer" },
            date: "2017/02/01 04:56:34",
            gender: "Male",
        },
    },
    {
        label: "Silvia Rosa",
        value: {
            id: 16,
            user: { first_name: "Silvia", last_name: "Rosa" },
            date: "2017/01/26 11:50:04",
            gender: "Female",
        },
    },
    {
        label: "Lori Cunningham",
        value: {
            id: 17,
            user: { first_name: "Lori", last_name: "Cunningham" },
            date: "2016/05/01 10:00:56",
            gender: "Female",
        },
    },
    {
        label: "Charle Graham",
        value: {
            id: 18,
            user: { first_name: "Charles", last_name: "Graham" },
            date: "2016/05/31 06:43:30",
            gender: "Male",
        },
    },
    {
        label: "Henry Morrison",
        value: {
            id: 19,
            user: { first_name: "Henry", last_name: "Morrison" },
            date: "2016/09/27 16:15:44",
            gender: "Male",
        },
    },
    {
        label: "Albert Mendoza",
        value: {
            id: 20,
            user: { first_name: "Albert", last_name: "Mendoza" },
            date: "2016/08/08 05:29:24",
            gender: "Male",
        },
    },
    {
        label: "Ruby Snyder",
        value: {
            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="tags"
            icon="tag"
            placeholder="Add an item"
            allow-new>
            <template #selected="{ options, removeItem }">
                <o-button
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.label"
                    :variant="getType(item.value)"
                    rounded
                    @click="removeItem(index, $event)" />
            </template>
        </o-taginput>
    </o-field>

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

JS

import { ref } from "vue";

const tags = 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";
    }
    return "";
}

Limits

Show code

HTML

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

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

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

Disabled

Show code

HTML

<o-field label="Disabled">
    <o-taginput
        :model-value="['One']"
        :options="['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']"
            :options="['One', 'Two', 'Three', 'Four']"
            variant="primary"
            allow-new
            allow-duplicates />
    </o-field>

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

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

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

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

    <o-field label="Danger">
        <o-taginput
            :model-value="['One']"
            :options="['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			-	From config: taginput: {   allowDuplicates: false }
allowNew			-	From config: taginput: {   allowNew: false }
ariaCloseLabel			-	From config: taginput: {   ariaCloseLabel: undefined }
autocomplete			-	From config: taginput: {   autocomplete: "off" }
checkScroll			-	From config: taginput: {   checkScroll: false }
closable			-	From config: taginput: {   closable: true }
closeIcon			-	From config: taginput: {   closeIcon: "close" }
confirmKeys			-	From config: taginput: {   confirmKeys: [",","Tab","Enter"] }
counter			-	From config: taginput: {   counter: true }
createItem			-	Default function (see source code)
customValidity			-
disabled			-	false
expanded			-	false
filter			-
icon			-	From config: taginput: {   icon: undefined }
iconPack			-	From config: taginput: {   iconPack: undefined }
input			-	""
keepFirst			-	false
keepOpen			-	From config: taginput: {   keepOpen: false }
maxitems			-
maxlength			-
v-model			-
openOnFocus			-	false
options			-
override			-
placeholder			-
removeOnKeys			-	From config: taginput: {   removeOnKeys: ["Backspace"] }
separators			-	From config: taginput: {   separators: [","] }
size			-	From config: taginput: {   size: undefined }
teleport			-	From config: taginput: {   teleport: false }
useHtml5Validation			-	From config: {   useHtml5Validation: true }
validateItem			-	Default function (see source code)
variant			-	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
update:input	value string - updated input prop	input 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 options object[] - selected options
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