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
- Wrap the component in
FormField
to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - The component clips text that extends beyond the visible area. This behavior is common to all states, i.e., default, read-only and disabled—whether or not the component has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter / Comma |
|
Escape |
|
Right arrow |
|
Left arrow |
|
Backspace |
|
Home |
|
End |
|
Control + A / Command + A |
|
Control + Backspace / Option + Backspace |
|
Control + Arrow keys / Option + Arrow keys |
|
Shift + Home / Shift + End |
|
- Wrap the component in
FormField
to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - The component clips text that extends beyond the visible area. This behavior is common to all states, i.e., default, read-only and disabled—whether or not the component has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter / Comma |
|
Escape |
|
Right arrow |
|
Left arrow |
|
Backspace |
|
Home |
|
End |
|
Control + A / Command + A |
|
Control + Backspace / Option + Backspace |
|
Control + Arrow keys / Option + Arrow keys |
|
Shift + Home / Shift + End |
|
- Wrap the component in
FormField
to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions. - The component clips text that extends beyond the visible area. This behavior is common to all states, i.e., default, read-only and disabled—whether or not the component has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
Key | Function |
---|---|
Tab |
|
Shift + Tab |
|
Enter / Comma |
|
Escape |
|
Right arrow |
|
Left arrow |
|
Backspace |
|
Home |
|
End |
|
Control + A / Command + A |
|
Control + Backspace / Option + Backspace |
|
Control + Arrow keys / Option + Arrow keys |
|
Shift + Home / Shift + End |
|