Inputitems

A simple item input field that can have autocomplete functionality

Examples

Base

Add some items

PistoiaValdinievole

Items: [ "Pistoia", "Valdinievole" ]

Show code

Autocomplete

Allow new items Open on focus

Enter some items

Items: []

Show code

HTMLJS

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-inputitems
            v-model="tags"
            :data="filteredTags"
            :allow-autocomplete="true"
            :allow-new="allowNew"
            :open-on-focus="openOnFocus"
            field="user.first_name"
            icon="tag"
            placeholder="Add an item"
            @typing="getFilteredTags" />
    </o-field>
    <p><b>Items:</b> {{ tags }}</p>
</section>

html

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);

scss

css

Custom selected

Enter some items

Items: []

Show code

Limits

Limited to 10 characters

Limited to 5 tags

0 / 5

Limited to 10 characters and 5 tags

0 / 5

Show code

Variants

Primary

One

Success

One

Info

One

Warning

One

Danger

One

Show code

Class props

John

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
autocompleteClasses	Classes to apply on internal autocomplete. More detail here
closeClass	Class of the close button of entered item.	`closable`
counterClass	Class of the counter element.	`hasCounter maxitems`
expandedClass	Class of input when expanded.	`expanded`
itemClass	Class of the entered item.
rootClass	Class of the root element.
variantClass	Class of the entered item variant.	`variant`	`primary info warning danger`

Inputitems component

html

<o-inputitems></o-inputitems>

Props

Prop name	Description	Type	Values	Default
allowAutocomplete	Add autocomplete feature (if true, any Autocomplete props may be used too)	boolean	-
allowDuplicates	Allows adding the same item multiple time	boolean	-	false
allowNew	When autocomplete, it allow to add new items	boolean	-
appendToBody	Append autocomplete content to body	boolean	-
ariaCloseLabel	Accessibility label for the close button	string	-
autocomplete	Native options to use in HTML5 validation	string	-
beforeAdding	Function to validate the value of the item before adding	func	-	Default function (see source code)
checkInfiniteScroll	Makes the autocomplete component check if list reached scroll end and emit infinite-scroll event	boolean	-	false
closable	Add close/delete button to the item	boolean	-	From config: `inputitems: { closable: true }`
closeIcon	Icon name of close icon on selected item	string	-	From config: `inputitems: { 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 (default comma, tab and enter)	array	-	From config: `inputitems: { confirmKeys: [',', 'Tab', 'Enter'] }`
createItem	Function to create a new item to push into v-model (items)	func	-	Default function (see source code)
data	Items data	array	-	[]
disabled	Input will be disabled	boolean	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-
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, optional	string	-
hasCounter	Show counter when maxlength or maxtags props are passed	boolean	-	From config: `inputitems: { hasCounter: true }`
icon	Icon name to be added	string	-
iconPack	Icon pack to use	string	`mdi`, `fa`, `fas and any other custom icon pack`
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-
maxitems	Limits the number of items, plus item counter	number\|string	-
maxlength	Same as native maxlength, plus character counter	number\|string	-
onPasteSeparators	Array of chars used to split when pasting a new string	array	-	From config: `inputitems: { onPasteSeparators: [','] }`
openOnFocus	Opens a dropdown with choices when the input field is focused	boolean	-
override		boolean	-
removeOnKeys	Allow removing last item when pressing given keys, if input is empty	array	-	From config: `inputitems: { removeOnKeys: ['Backspace'] }`
rounded	Makes the element rounded	boolean	-
size	Vertical size of input, optional	string	`small`, `medium`, `large`
statusIcon	Show status icon using field and variant prop	boolean	-	From config: `{ "statusIcon": true }`
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: `{ "useHtml5Validation": true }`
v-model		array	-	[]
validationMessage	The message which is shown when a validation error occurs	string	-
variant	Color of the each items, optional	string	`primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`

Events

Event name	Properties	Description
infinite-scroll
icon-right-click
blur
focus
invalid
update:modelValue
add
remove
typing

Slots

Name	Description	Bindings
selected
header
default
empty
footer

Sass variables

Current theme ➜ Oruga Base

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

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$inputitems-background-color	$input-background-color
$inputitems-height	calc(2em - 1px)
$inputitems-padding	calc(0.275em - 1px) 0 0
$inputitems-border-color	$grey-lighter
$inputitems-border-style	solid
$inputitems-border-width	1px
$inputitems-border-radius	$base-border-radius
$inputitems-color	#363636
$inputitems-line-height	$base-line-height
$inputitems-box-shadow	inset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$inputitems-max-width	100%
$inputitems-width	100%
$inputitems-counter-font-size	0.75rem
$inputitems-counter-margin	0.25rem 0 0 0.5rem
$inputitems-item-background-color	$primary
$inputitems-item-color	$primary-invert
$inputitems-item-border-radius	$base-border-radius
$inputitems-item-margin	0 0 0 0.275em
$inputitems-item-padding	0 0.75em 0 0.75em
$inputitems-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

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

Inputitems ​

Examples ​

Base

Autocomplete

Custom selected

Limits

Variants

Class props ​

Class prop

Description

Props

Suffixes

Inputitems component ​

Props ​

Events ​

Slots ​

Sass variables ​

Inputitems

Examples

Class props

Inputitems component

Props

Events

Slots

Sass variables