| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Tag inputs allow multiple metadata tags to be added to a piece of content from a pre-defined set.
...
Note: Where tags are subsequently being used to filter content, use the Filter Pane.
Types
Type | Usage | Image |
Browsable list |
|
 | |
Auto-complete |
|
 |
Usage & Behavior
General guidelines
...
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.
...
For the states of the tag menu list items, follow Lists.
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: |
.png?version=2&modificationDate=1667322760009&cacheVersion=1&api=v2)
.png?version=2&modificationDate=1667322760009&cacheVersion=1&api=v2&width=192) |
 |
 |
Active |
 |
 |
 |
 |
Disabled |
 |
 |
 |
 |
Error |
 | N/A |
 |
N/A
 |
Warning |
 | N/A |
 | N/A |
Focused |
 |
 |
 |
 |
Interaction
Browsable list
...
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
...
Where content is shown in a table, allow multiple items to be tagged at the same time.
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:
to apply filters when searching for content → use the Filter Pane instead.
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.
Focus management
When a tag input is first selected, screen readers should state how many tags are currently applied.
...
For the behavior of the tag menu, follow Drop-down Menu.
Keyboard | Tag field trigger button |
|---|
Tag pills | ||
|---|---|---|
 |  | |
Tab |
| 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:
| Left/Right: moves between the pills and trigger button. Up/Down:
|
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 |
| 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 |
| Removes the pill, de-selecting the tag. |
Arrows | Left/Right:
|
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. |
Design
Zeplin link |
Screen thumbnail
<<Short Zeplin link. YouUse this >>
<<Screen with 200 width>>
Code
<<a box containing the code - discuss with Femi>>
Code
...