The TagInput component is a text input component that adds values as tags.

• Backspace (when cursor is at position 0 in the input) removes items
• Enter keypress appends items to the list
• Define (or disable) a separator to add multiple items at once (splits on comma and new line by default)
• Values prop is controlled, it's up to consumers to control adding/removing items via onAdd, onRemove, or conveniently using onChange to get the new array.
• Prevent input clearing (for instance if an item is invalid) by returning false during onAdd or onChange

KauriWillow

You can customize the key to submit a new tag by either passing in space or enter. This will be the key by which to submit a tag as a user is typing in the input.

KauriWillow

Use the width property to control the width of the TagInput.

KauriWillow

Use the disabled property to disable interactions with the TagInput.

KauriWillow

Use the tagProps to change properties of a tag. This is useful in cases when you want to create red tags for example.

KauriWillow

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.

KauriWillow

Provide an autocompleteItems prop to enable autocomplete functionality. Note that this array of items needs to be manually controlled. TagInput will not remove items from this list after they are selected.

FirstSecond

In more delicate use cases you can use onAdd and onRemove instead of onChange.

• onAdd/onChange will give you strings that were entered and split (based on separator) and trimmed
• onRemove/onChange will give you the this.props.values with the item removed at a particular index, which could contain jsx if your props.values included it

If you are using an array of strings for use onChange safely, otherwise use onAdd/onRemove

test@test.com