| Table of Contents | ||||
|---|---|---|---|---|
|
Description
Tag inputs allow multiple metadata tags to be added to a piece of content from a pre-defined set. Adding
Categorising content with tags can make the content it easier to find, instigate relevant workflows, or define and control access permissions. Common tagsets include department, region, product, and personal information such as email addresses.
...
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
...
the tag field, containing:
applied tag pills, showing the tags already selected, containing:
a tag label.
a remove icon button.
a trigger button to open the tag menu, shown to open the right of the applied tag selectorpills.
a tag menu, containing:
Auto-
...
complete
An auto-completion complete tag input consists of:
the tag field, containing:
applied tag pills, showing the tags already selected, containing:
a tag label.
a text fieldarea, to the right of any applied tags.
a completion tag menu, containing:
a list of up to 20 tags.
a scrollbar, where needed.
a View All Tags link after the last tag (optional).
Default State
Where appropriate, tags may be pre-applied by default.When the browsable list tag menu is opened the search field should be in focus by default.
Internal Logic
...
For both input types, search should follow the logic and behavior of Live Search.
Tag field
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.
Can pills be truncated if the tag is particularly long? With the full label shown on hover?
- When
When the maximum field height is reached and there is no more space for additional pills,
a vertical Scrollbar may will be added to the field to show additional rows of pills, ormultiple additional tags may be combined into one pill. The pill label should show the number of additional tags, e.g. 4 tags. (Browsable list only)
On hover, all of the individual additional tags will be shown in a Tooltip.
On click, the full tag menu will open, allowing the user to remove tags.
...
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 alphabeticalalphabetically, numericalnumerically, 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 for the individual user.
After search, the results should be ordered by relevance.
Pill ordering
Pills should be arranged left-to-right in the order in which the tags were added.
States
IMAGES
States
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 |
List items: follow Multi-select Checkbox List
Follow Text Field ? And List.
Hover
Active
-
Error
-
Warning
-
Focused
 |  |  |  | |
Hover |  |  On hover over Close icon button: .png?version=2&modificationDate=1667322760009&cacheVersion=1&api=v2&width=192) |  |  |
Active |  |  |  |  |
Disabled |  |  |  |  |
Error |  | N/A |  |  |
Warning |  | N/A |  | N/A |
Focused |  |  |  |  |
Interaction
Browsable list
...
the trigger button, or
any blank space in the tag field.
Tag menu
The search field will be focused by default when the menu is first opened.
In the search field:
entering characters filters will filter the tags using Live Search.
pressing Enter will:
selects the top tagleave the focus on the search field, and
clears the search field, ready for another search. The tag selector remains leave the tag 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.
Auto-complete
Tag field
When the tag field is selected:
the completion tag menu is opened.
the most frequently or recently selected tags are shown.
As characters are entered, the tags are will be filtered using Live Search.
Pressing Enter while focus is on the tag field:
applies the first tag in the completion tag menu,
clears the current search, and
closes the completion tag menu.
Where no matching tags are shown, pressing Enter while focus is on the tag field should keep :
keeps the existing search string, and
keeps the tag menu open.
...
Tag menu
Clicking on a tag will:
apply the focused tag,
clear the current search,
close the completion tag menu, and
return the focus to the tag field, ready to search again.
Clicking outside of the completion tag menu closes it. The existing search string should be kept.
...
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. clicking on a pill to select it and clicking Delete(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.
Clicking Hovering on a pill label may open a Popover Tooltip showing further details, where relevant (optional).
...
Auto-complete
Pressing Delete when there are no search characters applied will delete the last applied tag pill.
...
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 tag input to apply tag metadata to a piece of content.a browsable list for smaller tagsets where the user is unlikely to know which tags are available.
auto-completion 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.
Focus management
When a tag input is first selected, screen readers should state how many tags are currently applied.
Browsable list
For the behavior of the tag menu, follow Drop-down Menu.
Keyboard | Tag field |
|---|
...
Keyboard
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 |
Focuses the pill (for tooltips) or selects the trigger button.
Delete
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
...
Keyboard
...
For the behavior of the tag menu, follow Live Search.
Keyboard | Tag field text area | Applied tag pills |
|---|---|---|
 |  | |
Tab |
|
|
Moves between the pills.
After the last pill, moves to the text field.
On a pill: focuses the pill (for tooltips)
On the text area:
| Navigates to the next component. |
Shift + Tab | Reverse tab. |
Space
Reverse tab. | ||
Space | Acts as text input. | N/A |
Enter |
On a pill: focuses the pill (for tooltips).
OnN/A | Moves focus to the text area |
. |
Esc | N/A | N/A |
Delete |
| 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:
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 |
Browsable list tag menu and Auto-complete completion menu
...
text area and acts as text input. |
Design
Zeplin link | Image |
...
...
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. YouUse this >>
...
<<Screen with 200 width>>
Code
<<a box containing the code - discuss with Femi>>
Code
...