Tag Input
React tag input component for entering multiple unique values as chip-style tokens, with suggestion dropdown and keyboard editing
import { TagInput } from "@plexui/ui/components/TagInput";Examples
Overview
size
minRows
pill
Inline filter row
size
pill
Email
ada@plexui.com
grace@plexui.com
Suggestions
size
pill
React
TypeScript
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | Tag[] | — | Controlled value |
defaultValue | Tag[] | — | Uncontrolled initial tags |
onChange | (tags: Tag[]) => void | — | Change handler |
placeholder | string | — | Input placeholder |
validator | (value: string) => boolean | — | Validates each tag; invalid tags shown in red |
maxTags | number | — | Max tags before input is disabled |
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 |
autoFocus | boolean | false | Focus on mount |