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

Disabled

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
allowDuplicatesAllows adding the same item multiple timeboolean-
From config:
taginput: {
  allowDuplicates: false
}
allowNewAllows adding new itemsboolean-
From config:
taginput: {
  allowNew: false
}
ariaCloseLabelAccessibility label for the close buttonstring-
From config:
taginput: {
  ariaCloseLabel: undefined
}
autocompleteNative options to use in HTML5 validationstring-
From config:
taginput: {
  autocomplete: "off"
}
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: string | object) => string | object-Default function (see source code)
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: (string | object)[], state: ValidityState) => string)-""
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"
filterFunction to filter the options based on the input value - default is display text comparison(options: (string | object)[], value: string) => (string | object)[]-
formatterFunction to format an option to a string for display it in the input (as alternative to field prop)(value: unknown, option: string | object) => string-
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:
taginput: {
  keepOpen: false
}
maxitemsLimits the number of items, plus item counterstring | number-
maxlengthSame as native maxlength, plus character counterstring | number-
v-modelThe input value statestring[]|object[]-Default function (see source code)
openOnFocusOpens a dropdown with choices when the input field is focusedboolean-false
optionsItems datastring[]|object[]-Default function (see source code)
overrideOverride existing theme classes completelyboolean-
placeholderInput placeholderstring-
removeOnKeysAllow removing last item when pressing given keys
(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values),
if input is empty
string[]-
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.
string | boolean | Record<string, any>-
From config:
taginput: {
  teleport: false
}
useHtml5ValidationEnable HTML 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
validateItemFunction to validate the value of a new item before it got added(value: string | object) => boolean-Default function (see source code)
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 string[] | object[] - updated modelValue propmodelValue prop two-way binding
inputvalue string - input valueon input change event
addvalue string | object - added itemnew item got added
removevalue string | object - 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 (string, object)[] - 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

SASS VariableDefault
$taginput-counter-font-size0.75rem
$taginput-counter-margin0.25rem 0 0 0.5rem
$taginput-item-background-colorvar(--#{$prefix}primary)
$taginput-item-colorvar(--#{$prefix}primary-invert)
$taginput-item-border-radiusvar(--#{$prefix}base-border-radius)
$taginput-item-margin0.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.