Text input with tokens
Text input with tokens is an input for a value that is a list.
On this page
On this page
Use a text input with tokens for a value that is a list. Items can be added or removed from the list, but the individual items cannot be edited inline.
This kind of input is most commonly used with an autocomplete to let users select items from a predetermined list of options.
Same as the text input, but the input's value is a list instead of a single string of text.
The text input can be configured with all of the same options as the regular text input component.
The list of tokens can be constrained to a single line or be wrapped to multiple lines. When wrapping is disabled and the list exceed the width of the input, the input will scroll horizontally.
When tokens wrap, the height of the input can be constrained to a maximum height. Once the rows exceed the maximum height, the input will scroll vertically.
You may choose to limit the number of tokens that are visible. However, all tokens will be visible while the text input is focused.
You may choose any of Primer's token components, but you cannot mix different token components in a single input. You may also choose the size of the tokens and whether or not the token's remove button is shown.
When tabbing to the input, the
<input /> element receives focus. Then, when the text cursor is at the beginning of
the input, users can use the
Left Arrow key to move focus to the last token. Once any token has focus, users can
Right Arrow and
Left Arrow key to move focus to the previous or next token.
A token may be removed by focusing it and pressing the
Backspace key, or by clicking the token's remove button.
If a user keys
Backspace and the text cursor is at the begining of the input, the last token will be removed but
the input will be populated with it's text value.