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.	Image RemovedImage Added
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.	Image RemovedImage Added

Usage & Behavior

...

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

Interaction

...

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

When a tag input is first selected, screen readers should state how many tags are currently applied.

...

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.