Free and open-source React tag input components built for modern applications and websites. These tag inputs are built using React Aria and styled with Tailwind CSS.
Type a value and press Enter or , (comma) — both add the current input as a tag and clear the input. Pasting a comma-separated string (e.g. "foo, bar, baz") adds every complete piece as its own tag at once, leaving any trailing piece without a following comma in the input for further editing.
Press Backspace with the input empty and the caret at the start to remove the last tag, or press the close button on any individual tag. ArrowLeft from an empty, caret-at-start input moves focus onto the last tag instead, so the arrow keys can be used to reach and remove an earlier tag.
Pass validate, a function that returns true to accept a trimmed, non-empty candidate or false to reject it. Pair it with onInvalidTag to find out why a tag was rejected — "empty", "duplicate", "max-tags" or "invalid" — and surface feedback of your own.
Pass maxTags. Once reached, further additions are rejected (and reported through onInvalidTag with reason "max-tags") until a tag is removed.
It keeps the existing tags visible but removes the text input and every tag's remove button, so the value can be shown without being editable. Use isDisabled instead when the whole field should look and behave as disabled.
Yes — pass value and onChange to drive the array of tag strings from your own state instead of letting TagInput manage it internally.