Components/TagInput

TagInput

Type-and-Enter tag input with max limit and duplicate prevention.

Installation

Examples

Add and remove tags

Type a tag and press Enter to add it.

ReactTypeScriptTailwind CSSNext.js

Press Enter or comma to add. 4 / 10 tags used.

API Reference

PropTypeDefaultDescription
valuestring[][]Controlled array of tags.
onChange(tags: string[]) => voidCalled when tags change.
maxTagsnumberMaximum tags allowed.
allowDuplicatesbooleanfalseAllows duplicate values.
placeholderstring'Add tag...'Placeholder text.
separatorsstring[]['Enter',',']Keys that create a new tag.