Type

Usage

Image

Browsable list

• Users may not know what the options are, and need to browse the entire list of available tags.

• Users may not know the exact terminology used for the tag labels.

• For small-to-medium size tagsets.

Auto-complete

• Users know what they are looking for, and do not need to browse the entire list of available tags.

• Users are likely to know the exact labels for the tags they’re looking for.

• For large tagsets.

Regular

Hover

On hover over Close icon button:

Active

Disabled

Error

N/A

N/A

Image Removed

Image Added

Warning

N/A

N/A

Focused

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 auto-suggest results

Left/Right: moves between the pills.

Up/Down: N/A

a-z, A-Z

Acts as text input.

Automatically moves focus to the text area.