...
Type | Usage | Image |
Browsable list | Users may not know what the options are, and need to browse the entire list of possible tags. Users may not know the exact terminology used for the tag labels. For small-to-medium size tagsets. |  |
Auto-completioncomplete | Users know what they are looking for, and do not need to browse the entire list of possible tags. Users are likely to know the exact labels for the tags they’re looking for. For large tagsets. |  |
...
the tag field, containing:
applied tag pills, showing the tags already selected.
a trigger button, to open the tag selector.
a tag menu, containing:
a Search field.
a list of all available tags, each including:
a label.
a checkbox.
a scrollbar, where needed.
Auto-
...
complete
An auto-completion complete tag input consists of:
the tag field, containing:
applied tag pills, showing the tags already selected.
a text field, to the right of any applied tags.
a completion tag menu, containing:
a list of up to 20 tags.
a View All Tags link after the last tag. (Optional).
a scrollbar, where needed.
...
The tag field may optionally expand as more tags are applied. A limit may be set to the field height.
The width of each pill will depend on its content, within minimum and maximum limits.
When there is no more space for additional pills, either:
a Scrollbar may be added to the field to show additional rows of pills, or
multiple additional tags may be combined into one pill. The pill label should show the number of additional tags, e.g. +4 tags.
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. (Browsable list only).
...
Tag menu ordering
Browsable list:
The list of tags should be in a logical order to make them easy to scan, such as alphabetical, numerical, orfrequency 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.
...
Pills should be arranged left-to-right in the order in which the tags were added.
States
IMAGES
State | Browsable list tag field | Auto-complete tag field | Applied tag pill |
Regular | List items: follow Multi-select Checkbox List | Follow Text Field ? And List. | Choose a graphical style   |
Hover | |||
Active | - | ||
Error | - | ||
Warning | - | ||
Focused |
...
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.
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 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:
keeps the existing search string, and
keeps the completion 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 the X button on the right-hand side of a pill.
clicking on a pill to select it and clicking pressing the Delete key.
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).
...
Auto-complete
Pressing Delete when there are no search characters applied will delete the last applied tag pill.
...
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.
...
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 completion 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: moves between the pills and text area. |
a-z, A-Z | Automatically moves focus/cursor to right of the last pill and starts to search. |
...
Tag menu
Follow https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/1273110308/List#Focus-management
...