Forms

TagsInput

A text input that turns entries into removable tag chips.

html
<UiTagsInput />

Model value

modelValue are the tags, as an array of strings. Press Enter or a delimiter to add one, Backspace on an empty field to remove the last.

vue nuxt

vue, nuxt

Placeholder

placeholder is shown while there are no tags and the field is empty. Say what a tag should be, since the field looks like an ordinary input until the first one is committed.

Disabled

disabled freezes the field — no tags can be added or removed.

vue nuxt

Variant

variant picks between the ringed outline field on the page background and the filled, tinted soft one with no ring.

vue
nuxt

Color

color is the color of the tag pills — the field itself stays neutral.

neutral
primary
secondary
success
error
warning
info
pending

Max

max caps how many tags can be added. Past it the field stops accepting new ones.

one two

Delimiters

delimiters are the characters that commit a tag as you type, on top of Enter. A comma by default — add a space or a semicolon where that's how people paste lists.

Wrapped in FormField

vue nuxt

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
string[]
[]
The list of tags.
string
Placeholder text shown when there are no tags and the input is empty.
boolean
false
Disables the input, preventing tags from being added or removed.
"outline" | "soft"
'outline'
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
Color of the tag pills.
number
Maximum number of tags allowed.
string[]
[',']
Characters that create a tag when typed, in addition to Enter.

Emits

Event
Payload
Description
update:modelValue
[value: string[]]

Types

ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";