Tag input

A multi-value tag entry with optional autocomplete suggestions, validation states, max-tags limit, and slot-overridable label/helper. Tags are added with Enter, , or Tab, and removed with × or Backspace on an empty input. Toggle Vue / CSS to switch the live demo and source together.

Basic

Default tag input that accepts custom values.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Variants

outlined, filled and underlined.

Vue SFC

Colors

All built-in color variants.

Vue SFC

States

Disabled, readonly and required.

Vue SFC

Validation

valid, invalid and warning states with messages.

Vue SFC

Suggestions

Autocomplete dropdown driven by an items array.

Vue SFC

Max tags

Limit how many tags can be added.

Vue SFC

Slots

Custom label and helper content via named slots.

Vue SFC

Event log

Live log of mno-add, mno-remove, mno-clear and mno-change.

Vue SFC

Customized

Override per-element styling with cssClass (Vue) or utility classes (CSS).

Vue SFC

Custom keys

Use key-value and display-value to feed natural-shape items (for example { id, name }) without pre-mapping. key-value names the property stored in each tag of modelValue; omit it to store the whole item object. display-value is either a property name (string) or a (item) => string function — when unset it falls back to item.label.

Vue SFC