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.

Usage & Behavior

General guidelines

...

the tag field, containing:
- applied tag pills, showing the tags already selected.
- a trigger button to open the tag menu, shown to the right of the applied tag pills.
a tag menu, containing:
- a Search field.
- a list of all available tags, each including:
  - a label. Checkbox and
  - a checkboxlabel.
- a scrollbar, where needed.

...

For both input types, search should follow the logic and behavior of Live Search.

The width of each pill will depend on its content, within minimum and maximum limits.
The trigger button should move as tags are applied, always being shown to the right of the last applied tag pill. (Browsable list only).
The width of each pill will depend on its content, within minimum and maximum limits.The tag field may optionally expand as more tags are applied. A limit may be set to the field height.
Where there is no more space for additional pills, a Scrollbar should be added to the field to show additional rows of pills.
Pills should be arranged left-to-right, top to bottom, in the order in which the tags were added.

...

Browsable list:
- The list of tags should be in a logical order to make them easy to scan, such as alphabetically, numerically, or by frequency of use.
- The tag order should remain the same when a search is applied.
Auto-complete:
- When the tag field is first selected, the tags should be ordered by frequency or recency.
- After search, the results should be ordered by relevance.

Pills should be arranged left-to-right in the order in which the tags were added
- .

For the states of the tag menu list items, follow:

...

State	Browsable list tag field	Auto-complete tag field	Applied tag pill
Regular			Image RemovedImage Added
Hover			Image RemovedImage Added On hover over Close icon button: Image RemovedImage Added
Active			Image RemovedImage Added
Disabled			Image RemovedImage Added
Error			N/A?
Warning			N/A?
Focused			Image RemovedImage Added

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

Keyboard	Description
Tab	From a previous component, moves focus to the first pill in the list. Moves between the pills. After the last pill, moves to the text field. From the text field, navigates to the next component.
Shift + Tab	Reverse tab
Space	On a pill: focuses the pill (for tooltips) On the text area: as text input.
Enter	On a pill: focuses the pill (for tooltips). On the text area: opens the tag menu.
Esc	Removes the pill, de-selecting the tag.
Delete	On a pill: removes the pill, de-selecting the tag. On the text area: as text input. After all text deleted, removes the last added pill.
Arrows	Left/Right: move between the pills and text area.
a-z, A-Z	Automatically moves focus/cursor to right of the last pill and starts to search.

...

...

KeyboardDescription	Tag field	Tag menu
Tab	From a previous component, moves focus to the trigger button. From the trigger button, navigates to the next component. Image Added	From the search bar, moves focus to the first tag checkbox. From the first checkbox, moves focus through the list of tags. From the last checkbox, navigates to the next component. The tag menu will close. Image Added
Shift + Tab	Reverse tab	Reverse tab
Space	Selects the trigger button to open the tag menu, or focuses the pill (for tooltips). Image Added	On the search bar - acts as text input. On a tag checkbox - selects or deselects the checkbox.
Enter	Selects the trigger button to open the tag menu, or focuses the pill (for tooltips).	On the search bar - moves focus to the first tag checkbox? On a tag checkbox - N/A
Delete	On the trigger button: removes the last pill, de-selecting the tag. On a pill: removes the pill, de-selecting the tag.	On the search bar - acts as text input. On a tag checkbox - N/A
Esc	On the trigger button: N/A On a pill: removes the pill, de-selecting the tag.	On the search bar - clears the search box. On a tag checkbox - N/A
Arrows	Left/Right: move between the pills and trigger button. Image Added	On the search bar, Down: navigates to the first tag checkbox. Up: N/A On a tag checkbox, Up/Down: moves between the tag checkboxes.