Skip to content

Taginput

A simple tag input field that can have autocomplete functionality

Examples

Base

Show code

Autocomplete

Show code

Custom selected

Show code

Limits

Show code

Variants

Show code

Class props

'Classes applied to the element'

Taginput component

A simple tag input field that can have autocomplete functionality

html
<o-taginput></o-taginput>

Props

Prop nameDescriptionTypeValuesDefault
allowAutocompleteAdd autocomplete feature (if true, any Autocomplete props may be used too)boolean-false
allowDuplicatesAllows adding the same item multiple timeboolean-false
allowNewWhen autocomplete, it allow to add new itemsboolean-false
ariaCloseLabelAccessibility label for the close buttonstring-
From config:
taginput: {
  ariaCloseLabel: undefined
}
autocompleteNative options to use in HTML5 validationstring-
From config:
taginput: {
  autocomplete: "off"
}
beforeAddingFunction to validate the value of the item before adding(value: string) => boolean-Default function (see source code)
checkScrollMakes the component check if list reached scroll start or end and emit scroll events.boolean-
From config:
taginput: {
  checkScroll: false
}
closableAdd close/delete button to the itemboolean-
From config:
taginput: {
  closable: true
}
closeIconIcon name of close icon on selected itemstring-
From config:
taginput: {
  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
string[]-
From config:
taginput: {
  confirmKeys: [",","Tab","Enter"]
}
counterShow counter when maxlength or maxtags props are passedboolean-
From config:
taginput: {
  counter: true
}
createItemFunction to create a new item to push into v-model (items)(value: any) => any-Default function (see source code)
dataItems dataarray-[]
disabledSame as native input disabledboolean-false
expandedMakes input full width when inside a grouped or addon fieldboolean-false
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 groupstring-
iconIcon to be shownstring-
From config:
taginput: {
  icon: undefined
}
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
taginput: {
  iconPack: undefined
}
keepFirstThe first option will always be pre-selected (easier to just hit enter or tab)boolean-false
keepOpenKeep open dropdown list after selectboolean-
From config:
autocomplete: {
  keepOpen: false
}
maxitemsLimits the number of items, plus item counternumber-
maxlengthSame as native maxlength, plus character counternumber-
openOnFocusOpens a dropdown with choices when the input field is focusedboolean-false
overrideOverride existing theme classes completelyboolean-
placeholderInput placeholderstring-
removeOnKeysAllow removing last item when pressing given keys, if input is emptystring[]-
From config:
taginput: {
  removeOnKeys: ["Backspace"]
}
separatorsArray of chars used to split when pasting a new stringstring[]-
From config:
taginput: {
  separators: [","]
}
sizeVertical size of the input controlstringsmall, medium, large
From config:
taginput: {
  size: undefined
}
teleportAppend 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|string|object-
From config:
taginput: {
  teleport: false
}
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 itemstringprimary, info, success, warning, danger, and any other custom color
From config:
taginput: {
  variant: undefined
}

Events

Event namePropertiesDescription
scroll-startthe list inside the dropdown reached the start
scroll-endthe list inside the dropdown reached it's end
icon-clickevent Event - native eventon icon click event
icon-right-clickevent Event - native eventon icon right click event
update:modelValuevalue any[] - updated modelValue propmodelValue prop two-way binding
inputvalue any - input valueon input change event
addvalue any - added itemnew item got added
removevalue any - removed itemitem got removed
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
selectedOverride selected itemsitems unknown[] - selected items
headerDefine an additional header
defaultOverride the select optionoption object - option object
index number - option index
value unknown - option value
emptyDefine content for empty state
footerDefine an additional footer
counterOverride the counteritems number - items count
total number - total count

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$taginput-background-color$input-background-color
$taginput-heightcalc(2em - 1px)
$taginput-paddingcalc(0.275em - 1px) 0 0
$taginput-border-color$grey-lighter
$taginput-border-stylesolid
$taginput-border-width1px
$taginput-border-radius$base-border-radius
$taginput-color#363636
$taginput-line-height$base-line-height
$taginput-box-shadowinset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$taginput-max-width100%
$taginput-width100%
$taginput-counter-font-size0.75rem
$taginput-counter-margin0.25rem 0 0 0.5rem
$taginput-item-background-color$primary
$taginput-item-color$primary-invert
$taginput-item-border-radius$base-border-radius
$taginput-item-margin0 0 0 0.275em
$taginput-item-padding0 0.75em 0 0.75em
$taginput-margin-icon-to-text0.1875em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$taginput-background-color$input-background-color
$taginput-heightcalc(2em - 1px)
$taginput-paddingcalc(0.275em - 1px) 0 0
$taginput-border-color$grey-lighter
$taginput-border-stylesolid
$taginput-border-width1px
$taginput-border-radius$base-border-radius
$taginput-color#363636
$taginput-line-height$base-line-height
$taginput-box-shadowinset 0 1px 2px hsla(0, 0%, 4%, 0.1)
$taginput-max-width100%
$taginput-width100%
$taginput-counter-font-size0.75rem
$taginput-counter-margin0.25rem 0 0 0.5rem
$taginput-item-background-color$primary
$taginput-item-color$primary-invert
$taginput-item-border-radius$base-border-radius
$taginput-item-margin0 0 0 0.275em
$taginput-item-padding0 0.75em 0 0.75em
$taginput-margin-icon-to-text0.1875em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

SASS VariableDefault
$taginput-badge-bg$light
$taginput-badge-color$dark
$taginput-badge-font-size0.9em
$taginput-badge-margin0.25em
$taginput-badge-icon-space0.25em
$taginput-counter-margin0.25rem 0 0 0.5rem
$taginput-counter-font-size0.75rem

See ➜ 📄 Full scss file

Released under the MIT License.