Tag Input

View on GitHub

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

KauricrossWillowcross
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ values: ['Kauri', 'Willow'] }}>
  {({ state, setState }) => (
    <TagInput
      inputProps={{ placeholder: 'Add trees...' }}
      values={state.values}
      onChange={values => {
        setState({ values })
      }}
    />
  )}
</Component>
code Hide code

Full width TagInput

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

KauricrossWillowcross
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ values: ['Kauri', 'Willow'] }}>
  {({ state, setState }) => (
    <TagInput
      inputProps={{ placeholder: 'Add trees...' }}
      width="100%"
      values={state.values}
      onChange={values => {
        setState({ values })
      }}
    />
  )}
</Component>
code 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.
<Component initialState={{ values: ['Kauri', 'Willow'] }}>
  {({ state, setState }) => (
    <TagInput
      disabled
      inputProps={{ placeholder: 'Add trees...' }}
      values={state.values}
      onChange={values => {
        setState({ values })
      }}
    />
  )}
</Component>
code 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.

KauricrossWillowcross
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ values: ['Kauri', 'Willow'] }}>
  {({ state, setState }) => (
    <TagInput
      tagProps={{
        color: 'red',
        isSolid: true
      }}
      inputProps={{ placeholder: 'Add red items...' }}
      values={state.values}
      onChange={values => {
        setState({ values })
      }}
    />
  )}
</Component>
code 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.comcrosstroll_mailercross
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ values: ['matt@awesome.com', 'troll_mailer'] }}>
  {({ state, setState }) => (
    <TagInput
      tagProps={value => {
        if (!value.includes('@')) return { color: 'red', isSolid: true }
        return {}
      }}
      inputProps={{ placeholder: 'Add email...' }}
      values={state.values}
      onChange={values => {
        setState({ values })
      }}
    />
  )}
</Component>
code 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.comcross
The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ values: ['matt@awesome.com'] }}>
  {({ state, setState }) => (
    <TagInput
      inputProps={{ placeholder: 'Add email...' }}
      values={state.values}
      onAdd={value => {
        if (!value.includes('@')) {
          toaster.danger('Oops, you tried entering a invalid email. Try again.')
          return
        }
        setState({
          values: [...state.values, value]
        })
      }}
      onRemove={(_value, index) => {
        setState({
          values: state.values.filter((_, i) => i !== index)
        })
      }}
    />
  )}
</Component>
code Hide code

TagInput Props

addOnBlurbool = false
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 = false
Whether or not the input should be disabled.
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
onChangefunc
Callback invoked when the tag values change. Returning `false` will prevent clearing the input. (values: Array) => void | false
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
separatorunion = /[,\n\r]/
Value or RegExp to split on pasted text or on enter keypress
tagPropsunion = {}
Provide props to tag component (actually `Badge`, for now).
valuesarrayOf = []
Controlled tag values. Each value is rendered inside a tag.
height = 32