Tokenized input
Lab componentTokenized 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.
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.
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.
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.