Tokenized input

TokenizedInput provides a field for text entry that is converted into a pill once the user enters a delimiting character (e.g., comma, semicolon or space).

Also known as: Form Token Field, Pills Input, Tags Field, Tags Input
Salt package@salt-ds/lab
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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.