# Inputitems

A simple item input field that can have autocomplete functionality

edit on github

# Examples

# Base

# Autocomplete

# Custom selected

# Limits

# Class props

📄 Full scss file

How does 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
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

# Props

Prop name Description Type Values Default
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 Add autocomplete feature (if true, any Autocomplete props may be used too) boolean -
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
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 -
nativeAutocomplete 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 Override classes boolean - false
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 -
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

# Slots

Name Description Bindings

# Style

CSS Variable SASS Variable Default
--oruga-inputitems-background-color $inputitems-background-color $input-background-color
--oruga-inputitems-height $inputitems-height calc(2em - 1px)
--oruga-inputitems-padding $inputitems-padding calc(.275em - 1px) 0 0
--oruga-inputitems-border-color $inputitems-border-color $grey-lighter
--oruga-inputitems-border-style $inputitems-border-style solid
--oruga-inputitems-border-width $inputitems-border-width 1px
--oruga-inputitems-border-radius $inputitems-border-radius $base-border-radius
--oruga-inputitems-color $inputitems-color #363636
--oruga-inputitems-line-height $inputitems-line-height $base-line-height
--oruga-inputitems-box-shadow $inputitems-box-shadow inset 0 1px 2px hsla(0,0%,4%,.1)
--oruga-inputitems-max-width $inputitems-max-width 100%
--oruga-inputitems-width $inputitems-width 100%
--oruga-inputitems-counter-font-size $inputitems-counter-font-size .75rem
--oruga-inputitems-counter-margin $inputitems-counter-margin .25rem 0 0 .5rem
--oruga-inputitems-item-background-color $inputitems-item-background-color $primary
--oruga-inputitems-item-color $inputitems-item-color $primary-invert
--oruga-inputitems-item-border-radius $inputitems-item-border-radius $base-border-radius
--oruga-inputitems-item-margin $inputitems-item-margin 0 0 0 0.275em
--oruga-inputitems-item-padding $inputitems-item-padding 0 .75em 0 .75em
--oruga-inputitems-margin-icon-to-text $inputitems-margin-icon-to-text .1875em