Content Comparison

...

• the tag field, containing:

  • applied tag pills, showing the tags already selected, containing:

    • a tag label.

    • a close remove icon button.

  • a trigger button to open the tag menu, shown to the right of the applied tag pills.

• a tag menu, containing:

  • a Search field (optional).

  • a list of all available tags, each including:

    • a Checkbox and

    • a label.

  • a scrollbar, where needed.

...

• In the search field:

  • entering characters will filter the tags using Live Search.

  • pressing Enter will:

    • select and apply the top tag,

    • clear leave the focus on the search field, ready for another search, and

    • leave the tag selector menu open.

• Within the tag list:

  • clicking anywhere on the tag label or checkbox selects and applies the tag. The tag selector menu remains open.

• Clicking outside of the tag menu closes it.

...

For the behavior of the tag menu, follow Search with Auto Suggest.

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 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.

...