Taginput

The Taginput input component allows users to search through a list of options and apply any number of tags. The component is based on the Autocomplete component and supports the W3C ARIA APG Combobox Pattern. Use it with the Field component to access all functionalities.

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

Unlike the dropdown or autocomplete components, the taginput component allows you to enter an arbitrary value (a value taht is not in the list of options). This is useful for creating new tags on the fly. To enable this feature, set the allow-new prop to true.

The options prop can accept several different formats of values:

• An array of primitives ['A', 'B', 'C']
• An object literal with key-value pairs { a: 'A', b: 'B', c: 'C' }
• An array of objects with label and value properties
• Grouped options by adding additional options to the option object.

Note

The options prop works the same as the Select input component options prop.

Show code

HTML

<section>
    <o-field grouped 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);

Slots

Different parts of the component can be customised using slots.

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 #header> Custom Header </template>
            <template #footer> Custom Footer </template>
            <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

The number of entered items can be limited either by the character length of the item using the maxlength prop and by the number of times using the maxitems prop.

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

Prevent inputs with the disabled prop.

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

Different styles can be achieved with the variant prop.

Show code

HTML

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

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

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

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

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

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

Sizes

The component can be displayed in different sizes using the size prop.

Show code

HTML

<section>
    <o-field label="Small">
        <o-taginput
            :model-value="['One']"
            :options="['One', 'Two', 'Three', 'Four']"
            size="small"
            placeholder="Add an item"
            allow-new
            allow-duplicates />
    </o-field>

    <o-field label="Default">
        <o-taginput
            :model-value="['One']"
            :options="['One', 'Two', 'Three', 'Four']"
            placeholder="Add an item"
            allow-new
            allow-duplicates />
    </o-field>

    <o-field label="Medium">
        <o-taginput
            :model-value="['One']"
            :options="['One', 'Two', 'Three', 'Four']"
            size="medium"
            placeholder="Add an item"
            allow-new
            allow-duplicates />
    </o-field>

    <o-field label="Large">
        <o-taginput
            :model-value="['One']"
            :options="['One', 'Two', 'Three', 'Four']"
            size="large"
            placeholder="Add an item"
            allow-new
            allow-duplicates />
    </o-field>
</section>

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: "Remove" }
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" }
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: unknown) => unknown)	-	item as T
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: unknown[] | null , state: ValidityState) => string) | undefined	-
disabled	Same as native input disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
filter	Function to filter the options based on the input value - default is label string comparison	((options: unknown, value: string) => boolean)	-
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 }
input	The value of the inner input, use v-model:input to make it two-way binding	string	-	""
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-	From config: taginput: {   keepFirst: false }
keepOpen	Keep open dropdown list after select	boolean	-	From config: taginput: {   keepOpen: false }
maxitems	Limits the number of items, plus item counter	number | string	-
maxlength	Same as native maxlength, plus character counter	number | string	-
v-model	The selected items, use v-model to make it two-way binding binding	unknown[]	-
openOnFocus	Opens a dropdown with choices when the input field is focused	boolean	-	From config: taginput: {   openOnFocus: true }
options	Taginput options	OptionsPropWithGroups<unknown>	-
override	Override existing theme classes completely	boolean	-
placeholder	Input placeholder	string	-
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 | object | string	-	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: unknown) => boolean)	-	true
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:model-value	value string[] | number[] | 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 event Event - native event	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 (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

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
expandedClass	Class of the root element when expanded.	expanded
containerClass	Class of the inner container element.
itemClass	Class of the tag item element.
closeClass	Class of the tag item close button element.	closable
counterClass	Class of the counter element.	counter maxitems
autocompleteClasses	Classes to apply on the internal autocomplete component. More details here.

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$taginput-counter-font-size	0.75em
$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-item-icon-margin	0.5em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$taginput-height	100%
$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