...

• Pills should be arranged left-to-right, top to bottom, in the order in which the tags were applied.

• The width of each pill will depend on its content, within minimum and maximum limits.

  • Where a tag label exceeds the maximum pill width it should be truncated, with the full label shown in a Tooltip on hover.

• 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 tag field may optionally expand as more tags are applied. A limit may be set to the field height.

  • When the maximum field height is reached and there is no more space for additional pills, a vertical Scrollbar will be added to the field.

  • When pills are removed, the field will shrink again.

...

Tag menu ordering

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

...

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

Interaction

...

• Tags can be removed by:

  • clicking on a pill to select it and pressing the Delete key. Multiple pills can be selected by using drag.

  • clicking the X button on the right-hand side of a pill. (Browsable list only).

  • pressing the Delete key when there are no search characters applied. Ctrl/cmd-A can also be used to select all tags before deleting. (Auto-complete only).

• When a pill is removed, the remaining pills will move to the left to close the gap.

• Hovering on a pill label may open a Tooltip showing further details, where relevant. (Optional).

...

Validation and Errors

The tag menu should show an empty state when a search has no matching tags. See Live Search.

Best practices

General

...

Use:

• a browsable list for smaller tagsets where the user is unlikely to know which tags are available.

• auto-complete for larger tagsets where the user is likely to know the exact label for the tag(s) they’re looking for.

Don’t use:

...

• where only one tag can be applied to an item → use a Drop-down Menu instead.

• to apply filters when searching for content → use the Filter Pane instead.

Accessibility Compliance

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

...

Keyboard	Tag field trigger button	Applied tag Tag pills
Tab	From a previous component, moves focus to the trigger button. From the trigger button, navigates to the next component.	Navigates to the next component outside of the tag input.
Shift + Tab	Reverse tab.	Reverse tab.
Space	Selects the trigger button to open the tag menu.	N/A
Enter	Selects the trigger button to open the tag menu.	Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.
Delete and Backspace	N/A	Removes the pill, de-selecting the tag. Focus moves to the pill or trigger button immediately to its right.
Esc	N/A	N/A
Arrows	Left/Right: moves between the pills and trigger button. Up/Down: single pill row: N/A multiple pill rows: moves between rows.	Left/Right: moves between the pills and trigger button. Up/Down: single pill row: N/A multiple pill rows: moves between rows.
Page up/Home	Navigates to the first pill.	Navigates to the first pill.
Page down/End	N/A	Navigates to the trigger button.

Auto-complete tag field

For the behavior of the tag menu, follow Live 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 from the left of the text area, left moves to the last pill. Up/Down: moves focus to the auto-suggest 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
<<Short Zeplin link. YouUse this >>	<<Screen with 200 width>>

...