Tag Input
Input for entering multiple unique values as chip-style tokens, with suggestions and keyboard editing.
import { TagInput } from "@plexui/vue/components/TagInput";Examples
Overview
size
minRows
Inline filter row
size
Suggestions
size
API
| Prop | Type | Default | Description |
|---|---|---|---|
value / v-model:value | Tag[] | — | Controlled value; update:value fires on every change |
default-value | Tag[] | — | Uncontrolled initial tags |
@change | (tags: Tag[]) => void | — | Fires when the tags change |
id | string | — | Id of the text input, so a label can target it with for |
placeholder | string | — | Input placeholder |
validator | (value: string) => boolean | — | Validates each tag when it is created; invalid tags shown in red |
max-tags | number | — | Maximum number of tags. At the limit the text input hides and a count shows below; the container then takes the tab stop, so arrow keys and Backspace still select and remove tags |
rows | number | 1 | Min rows |
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | xl | Control height when rows=1; matches Input height of the same size |
pill | boolean | false | Fully-rounded container and chips; matches Input/SelectControl pill |
delimiters | string[] | [",", " "] | Characters that commit the current text as a tag |
disabled | boolean | — | Disables the input: tags cannot be added or removed, and pending text stays as typed |
auto-focus | boolean | false | Focus on mount |
Tag is { value: string; valid: boolean }.
Styling
Tag Input reads these component tokens. Override them at any scope to restyle it:
--button-font-weight: font weight (defaultvar(--font-weight-medium))--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-focus: outline border color focus (defaultvar(--alpha-50))--input-text-color: text color (defaultvar(--color-text))