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
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

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
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Full width TagInput

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

KauriWillow
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Disabled TagInput

Use the disabled property to disable interactions with the TagInput.

KauriWillow
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

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
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

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.

matt@awesome.comtroll_mailer
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

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

matt@awesome.com
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

TagInput Props

addOnBlurbool
Whether or not the inputValue should be added to the tags when the input blurs.
classNamestring
The class name to apply to the container component.
disabledbool
Whether or not the input should be disabled.
heightnumber
The vertical size of the input
inputPropsobject
Props to pass to the input component. Note that `ref` and `key` are not supported. See `inputRef`.
inputReffunc
Ref handler for the input element. (input: HTMLInputElement | null) => void
onAddfunc
Callback invoked when new tags are added. Returning `false` will prevent clearing the input. (values: Array) => void | false
onBlurfunc
Callback invoked when focus on the input blurs. (event) => void
onChangefunc
Callback invoked when the tag values change. Returning `false` will prevent clearing the input. (values: Array) => void | false
onFocusfunc
Callback invoked when the input receives focus. (event) => void
onInputChangefunc
Callback invoked when the value of the input is changed. Shorthand for `inputProps={{ onChange }}`. (event) => void
onRemovefunc
Callback invoked when a tag is removed. Receives value and index of removed tag. (value: string | node, index: number) => void
separatorstring | instanceOf | false
Value or RegExp to split on pasted text or on enter keypress
tagPropsobject | func
Provide props to tag component (actually `Badge`, for now).
tagSubmitKey'enter' | 'space'
Key to press in order to submit a new tag while typing.
valuesArray<node>
Controlled tag values. Each value is rendered inside a tag.