Skip to content
On this page

Inputitems

A simple item input field that can have autocomplete functionality

Base

PistoiaValdinievole

Items: [ "Pistoia", "Valdinievole" ]

Autocomplete

Items: []

Custom selected

Items: []

Limits

0 / 5
0 / 5

Class props


John
How does Class props inspector work?
Class propDescriptionPropsSuffixes
autocompleteClassesClasses to apply on internal autocomplete. More detail here
closeClassClass of the close button of entered item.closable
counterClassClass of the counter element.hasCounter
maxitems
expandedClassClass of input when expanded.expanded
itemClassClass of the entered item.
rootClassClass of the root element.
variantClassClass of the entered item variant.variantprimary
info
warning
danger


Props

Prop nameDescriptionTypeValuesDefault
allowDuplicatesAllows adding the same item multiple timeboolean-false
allowNewWhen autocomplete, it allow to add new itemsboolean-
appendToBodyAppend autocomplete content to bodyboolean-
ariaCloseLabelAccessibility label for the close buttonstring-
autocompleteAdd autocomplete feature (if true, any Autocomplete props may be used too)boolean-
beforeAddingFunction to validate the value of the item before addingfunc-Default function (see source code)
checkInfiniteScrollMakes the autocomplete component check if list reached scroll end and emit infinite-scroll eventboolean-false
closableAdd close/delete button to the itemboolean-
From config

inputitems: {
  closable: true
}
closeIconIcon name of close icon on selected itemstring-
From config

inputitems: {
  closeIcon: 'close'
}
confirmKeysArray 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']
}
createItemFunction to create a new item to push into v-model (items)func-Default function (see source code)
dataItems dataarray-[]
disabledInput will be disabledboolean-
expandedMakes input full width when inside a grouped or addon fieldboolean-
fieldProperty of the object (if data is array of objects) to use as display textstring-'value'
groupFieldProperty of the object (if data is array of objects) to use as display text of groupstring-
groupOptionsProperty of the object (if data is array of objects) to use as key to get items array of each group, optionalstring-
hasCounterShow counter when maxlength or maxtags props are passedboolean-
From config

inputitems: {
  hasCounter: true
}
iconIcon name to be addedstring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
keepFirstThe first option will always be pre-selected (easier to just hit enter or tab)boolean-
maxitemsLimits the number of items, plus item counternumber|string-
maxlengthSame as native maxlength, plus character counternumber|string-
nativeAutocompletestring-
onPasteSeparatorsArray of chars used to split when pasting a new stringarray-
From config

inputitems: {
  onPasteSeparators: [',']
}
openOnFocusOpens a dropdown with choices when the input field is focusedboolean-
overrideboolean-
removeOnKeysAllow removing last item when pressing given keys, if input is emptyarray-
From config

inputitems: {
  removeOnKeys: ['Backspace']
}
roundedMakes the element roundedboolean-
sizeVertical size of input, optionalstringsmall, medium, large
statusIconShow status icon using field and variant propboolean-
From config

{
   "statusIcon": true
}
useHtml5ValidationEnable html 5 native validationboolean-
From config

{
   "useHtml5Validation": true
}
v-modelarray-[]
validationMessageThe message which is shown when a validation error occursstring-
variantColor of the each items, optionalstringprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
infinite-scroll
icon-right-click
blur
focus
update:modelValue
add
remove
typing

Slots

NameDescriptionBindings
selected
header
default
empty
footer

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-inputitems-background-color$inputitems-background-color$input-background-color
--oruga-inputitems-height$inputitems-heightcalc(2em - 1px)
--oruga-inputitems-padding$inputitems-paddingcalc(.275em - 1px) 0 0
--oruga-inputitems-border-color$inputitems-border-color$grey-lighter
--oruga-inputitems-border-style$inputitems-border-stylesolid
--oruga-inputitems-border-width$inputitems-border-width1px
--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-shadowinset 0 1px 2px hsla(0,0%,4%,.1)
--oruga-inputitems-max-width$inputitems-max-width100%
--oruga-inputitems-width$inputitems-width100%
--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-margin0 0 0 0.275em
--oruga-inputitems-item-padding$inputitems-item-padding0 .75em 0 .75em
--oruga-inputitems-margin-icon-to-text$inputitems-margin-icon-to-text.1875em

Released under the MIT License.