Tab |
- If focus is above the component, Tab moves focus to the component. The input becomes active, with a visible text cursor.
- If focus is in the component (i.e., in the text input or on a token), Tab moves focus to the field’s X button. If there’s text in the input field, Tab tokenizes the text.
- If focus is on the X button, Tab moves focus out of the component to the next component in the tab order.
|
Shift + Tab |
- If focus is below the component, this action moves the focus to the collapsed button.
- If focus is in the X button, this action moves focus to the text input and the text cursor is displayed.
- If focus is in the text input or on a token, this action moves focus out of the component to the previous component in the tab order. If there’s text in the input field, this action tokenizes the text.
|
Enter / Comma |
- Default delimiting character. This action tokenizes the preceding text, if there’s any, within the input field.
|
Escape |
- Escape clears the current text from the input field without tokenizing it.
- If highlight is on a pill, Escape clears the pill from the group.
|
Right arrow |
- If visual focus is on a token, Right arrow moves visual focus to the next token.
- If there are multiple lines and visual focus is on the token at the end of the current line, Right arrow wraps focus to the first token on the following line.
- If visual focus is on the last token, Right arrow removes focus from the tokens. The text input becomes active, with a visible text cursor.
|
Left arrow |
- If the text cursor immediately succeeds the token group, Left arrow moves visual focus to the last token.
- If visual focus is on a token, Left arrow moves focus to the previous token.
- If there are multiple lines and visual focus is on the token at the start of the current line, Left arrow wraps focus to the last token in the preceding line.
- If visual focus is on the first token, Left arrow does nothing.
|
Backspace |
- If the text cursor immediately succeeds the token group, Backspace moves visual focus to the last token.
- If visual focus is on a token, Backspace removes it from the field and sets focus on the preceding token.
- If there’s only one token with visual focus, Backspace removes the token. The text input becomes active, with a visible text cursor.
|
Home |
- If there’s text in the input field, Home moves the cursor to the first character position.
|
End |
- If there’s text in the input field, End moves the cursor to the last character position.
|
Control + A / Command + A |
- This action highlights all values, text and tokens, within the field.
|
Control + Backspace / Option + Backspace |
- This action removes the entire word or token immediately preceding the text cursor.
|
Control + Arrow keys / Option + Arrow keys |
- This action moves the cursor or visual focus one word or token at a time. If it reaches the beginning or end of the field, does nothing.
|
Shift + Home / Shift + End |
- If there’s text in the input field, this action immediately drags selection from the current location of the text cursor to the start/end of the field.
|