Tokenized input

Lab component

Also known as

Form Token Field, Pills Input, Tags Field, Tags Input

Tokenized input provides an input field for text that’s converted into a pill within the field, or tokenized, when the user enters a delimiting character.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
Density
Mode

The default component has no text input constraints, so you can use it to accept any alphanumeric character or symbol. When the user enters a text value followed by a delimiter, the value is tokenized into a pill.

You can disable the component if required, e.g., due to context or user permissions.

By default, the component tokenizes the preceding text into a pill when the user presses Enter, Tab or the comma (,) key. To customize the key or character that separates and delimits text to fit the expected convention within your application, set a custom key or set of keys as delimiter. For example, you can define a semi-colon (;) or full-stop (.) as your delimiter.