Tag Input

The Tag Input component allow user to type in multiple values as tags.

DetailsProperties

Introduction

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

Highlights

  • 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

Basic controlled TagInput

KauriWillow

Custom tag submit key

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

Full width TagInput

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

KauriWillow

Disabled TagInput

Use the disabled property to disable interactions with the TagInput.

KauriWillow

Change props of tags

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

KauriWillow

Change props of tags based on the value

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

Autocomplete

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

Using onAdd and onRemove (advanced)

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