Skip to content

TextInputWithTokens

Alpha

A TextInputWithTokens component is used to show multiple values in one field.

It supports all of the features of a TextInput component, but it can render a list of Tokens next to the area a user types in.

Basic Example

Component Props

NameTypeDefaultDescription
tokensTokenProps[]undefinedRequired. The array of tokens to render
onTokenRemove(tokenId: string \| number) => voidundefinedRequired. The function that gets called when a token is removed
tokenComponentReact.ComponentType<any>TokenOptional. The component used to render each token
maxHeightReact.CSSProperties['maxHeight']undefinedOptional. The maximum height of the component. If the content in the input exceeds this height, it will scroll vertically
preventTokenWrappingbooleanfalseOptional. Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
sizeTokenSizeKeysextralargeOptional. The size of the tokens
hideTokenRemoveButtonsbooleanfalseOptional. Whether the remove buttons should be rendered in the tokens

Adding and removing tokens

The array passed to the tokens prop needs to be manually updated to add and remove tokens.

The function passed to the onRemoveToken prop is called when:

  • Clicking the remove button in the token
  • Pressing the Backspace key when the input is empty
  • Selecting a token using the arrow keys or by clicking on a token and then pressing the Backspace key

There is no function that gets called to "add" a token, so the user needs to be provided with a UI to select tokens.

Custom token rendering

By default, the Token component is used to render the tokens in the input. If this component does not make sense for the kinds of tokens you're rendering, you can pass a component to the tokenComponent prop

Example: a TextInputWithTokens that renders tokens as IssueLabelToken: