Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Keyboard

Tag field text area

Applied tag pills

Tab

  • From a previous component, moves focus to the tag field text area.

  • From the tag field text area, navigates to the next component.

Navigates to the next component.

Shift + Tab

Reverse tab.

Reverse tab.

Space

Acts as text input.

N/A

Enter

N/A

Moves focus to the text area.

Esc

N/A

N/A

Delete

  • Acts as text input.

  • After all text has been deleted, removes the last added pill.

Removes the pill, de-selecting the tag.

Arrows

Left/Right:

  • act as arrows within the text.

  • from the left of the text area, left moves to the last pill.

Up/Down: moves focus to the suggested search results.

Left/Right: moves between the pills.

Up/Down: N/A

Page up/Home

Navigates to the first pill.

Navigates to the first pill.

Page down/End

N/A

Navigates to the text area.

a-z, A-Z

Acts as text input.

Automatically moves focus to the text area and acts as text input.

Design

Zeplin link

Screen thumbnail

https://zpl.io/6Ne3W9j

Tag Input.pngImage Modified

Code

...