React Tag Input
For when the values aren't a fixed list — keywords, labels, recipients — and the user types them into being. Distinct from a multi-select: there is no menu you must pick from, just a field that turns what you type into removable chips.
Type and press Enter or comma to add. Backspace on an empty field removes the last tag. Value: [power, automotive]
Installation
Props
| Prop | Type | Description |
|---|---|---|
| value | string[] | Controlled tags |
| defaultValue | string[] | Initial tags (uncontrolled) |
| onChange | (tags) => void | Fires on add / remove |
| suggestions | string[] | Optional autocomplete menu |
| max | number | Cap the number of tags |
Keyboard flow is the feature
People add tags in a rhythm — type, Enter, type, Enter — and a stolen keystroke breaks it. So Enter and comma both commit a tag, Backspace on an empty field deletes the last one (the universal undo of tag fields), and typing over a suggestion never hijacks the key you meant for your own text. Suggestions appear only while you are typing and only for values not already added; clicking one commits it without stealing focus, so you can keep going.
No silent duplicates — adding a tag that already exists (case-insensitively) just clears the field rather than creating a second identical chip, because two "power" tags is never what anyone meant. A max caps the count and hides the input once reached. Controlled or uncontrolled; wire onChange to your form state.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.