TagInput
A multi-value text input that creates removable Chip tags on Enter or comma.
Live Demo
ReactTypeScript
MaxThree
DisabledTag
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Controlled array of tag strings. |
onChange | (tags: string[]) => void | — | Callback receiving the updated tags array. |
placeholder | string | 'Add tag…' | Placeholder shown when no tags are present. |
disabled | boolean | false | Disables the input. |
maxTags | number | — | Maximum number of tags allowed. |
Usage
import { TagInput } from '@ghiberti85/ui'
const [tags, setTags] = useState(['React', 'TypeScript'])
<TagInput value={tags} onChange={setTags} placeholder="Add tag…" />
// With max limit
<TagInput maxTags={5} value={tags} onChange={setTags} />
// Disabled
<TagInput disabled value={['React']} />