Tag inputs allow multiple metadata tags to be added to a piece of content from a pre-defined set. Categorising content with tags can make it easier to find, instigate workflows, or define 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.
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. |  |
Each tagset should have its own tag input.
A browsable list tag input consists of:
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.
a checkbox.
a scrollbar, where needed.
An auto-complete tag input consists of:
the tag field, containing:
applied tag pills, showing the tags already selected.
a text insertion point, to the right of any applied tags.
a tag menu, containing:
a list of up to 20 tags.
a scrollbar, where needed.
a View All Tags link after the last tag (optional).
Where appropriate, tags may be pre-applied by default.
For both input types, search should follow the logic and behavior of Live Search.
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.
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:
Multi-select Checkbox List (Browsable list).
List (Auto-complete).
State | Browsable list tag field | Auto-complete tag field | Applied tag pill |
Regular |  |  |  |
Hover |  |  |  On hover over Close icon button: .png?version=2&modificationDate=1667322760009&cacheVersion=1&api=v2&width=102 "Verint LUX Design System > Tag input > pill-hover(remove).png") |
Active |  |  |  |
Disabled |  |  |  |
Error |  |  | N/A? |
Warning |  |  | N/A? |
Focused |  |  |  |
The tag menu will be opened when the user clicks on either:
the trigger button, or
any blank space in the tag field.
The search field will be focused by default when the menu is first opened.
In the search field:
entering characters filters the tags using Live Search.
pressing Enter:
selects the top tag, and
clears the search field, ready for another search. The tag selector remains open.
Within the tag list:
clicking anywhere on the tag label or checkbox selects and applies the tag. The tag selector remains open.
Clicking outside of the tag menu closes it.
When the tag field is selected:
the tag menu is opened.
the most frequently or recently selected tags are shown.
As characters are entered, the tags are filtered using Live Search.
Pressing Enter while focus is on the tag field:
applies the first tag in the tag menu,
clears the current search, and
closes the tag menu.
Where no matching tags are shown, pressing Enter while focus is on the tag field:
keeps the existing search string, and
keeps the tag menu open.
Clicking on a tag will:
apply the focused tag,
clear the current search,
close the tag menu, and
return the focus to the tag field, ready to search again.
Clicking outside of the tag menu closes it. The existing search string should be kept.
Tags can be removed by:
clicking the X button on the right-hand side of a pill.
clicking on a pill to select it and pressing the Delete key.
pressing the Delete key when there are no search characters applied (Auto-complete only).
When a pill is removed, the remaining pills will move to the left to close the gap.
Clicking or hovering on a pill label may open a Popover showing further details, where relevant. (Optional).
The tag menu should show an empty state when a search has no matching tags.
General
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.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Keyboard | Description |
|---|---|
Tab |
|
Shift + Tab | Reverse tab |
Space |
|
Enter |
|
Delete | On the trigger button: removes the last pill, de-selecting the tag. On a pill: removes the pill, de-selecting the tag. |
Esc | On the trigger button: N/A On a pill: removes the pill, de-selecting the tag. |
Arrows | Left/Right: move between the pills and trigger button. |
Keyboard | Description |
|---|---|
Tab |
|
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. |
Follow https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1273110308/List#Focus-management
Zeplin link | Screen thumbnail |
|---|---|
 <<Short Zeplin link. YouUse this >> | <<Screen with 200 width>> |
<<a box containing the code - discuss with Femi>>