The Tag Input component allow user to type in multiple values as tags.
The TagInput component is a text input component that adds values as tags.
separatorto add multiple items at once (splits on comma and new line by default)
onRemove, or conveniently using
onChangeto get the new array.
You can customize the key to submit a new tag by either passing in
This will be the key by which to submit a tag as a user is typing in the input.
width property to control the width of the
disabled property to disable interactions with the
tagProps to change properties of a tag.
This is useful in cases when you want to create red tags for example.
In some cases you might want to change the props of a tag based on the input.
Pass a function to the
tagProps to achieve this.
autocompleteItems prop to enable autocomplete functionality. Note that this array of items needs to be
TagInput will not remove items from this list after they are selected.
In more delicate use cases you can use
onRemove instead of
onAdd/onChangewill give you strings that were entered and split (based on
separator) and trimmed
onRemove/onChangewill give you the
this.props.valueswith the item removed at a particular index, which could contain jsx if your
If you are using an array of strings for use
onChange safely, otherwise use