Tokenized input

Release candidate

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.

Also known as: Form Token Field, Pills Input, Tags Field, Tags Input

View source code

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

Using the component

When to use

The component is typically used in a form. It’s ideal for fields that can contain multiple, specific values related to a single topic or context—and these values can be removed quickly and in their entirety. You would use the component, for example, in a field for email addresses or a fast field for a cash ticket.

When not to use

To generate a list of suggested values that partially match the text entered by the user. Instead, use ComboBox.
To choose exclusively from options in an existing dataset. Instead, use ComboBox.

Import

To import TokenizedInputNext from the lab Salt package, use:

Props

Name	Type	Description	Default

Using the component

When to use

The component is typically used in a form. It’s ideal for fields that can contain multiple, specific values related to a single topic or context—and these values can be removed quickly and in their entirety. You would use the component, for example, in a field for email addresses or a fast field for a cash ticket.

When not to use

To generate a list of suggested values that partially match the text entered by the user. Instead, use ComboBox.
To choose exclusively from options in an existing dataset. Instead, use ComboBox.

Import

To import TokenizedInputNext from the lab Salt package, use:

Props

Name	Type	Description	Default

Using the component

When to use

The component is typically used in a form. It’s ideal for fields that can contain multiple, specific values related to a single topic or context—and these values can be removed quickly and in their entirety. You would use the component, for example, in a field for email addresses or a fast field for a cash ticket.

When not to use

To generate a list of suggested values that partially match the text entered by the user. Instead, use ComboBox.
To choose exclusively from options in an existing dataset. Instead, use ComboBox.

Import

To import TokenizedInputNext from the lab Salt package, use:

Props

Name	Type	Description	Default