| Table of Contents | ||||
|---|---|---|---|---|
|
...
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. |  |
...
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.
...
For both input types, search should follow the logic and behavior of Live Search.
Tag field
The tag field may optionally expand as more trigger button should move as tags are applied. A limit may be set to the field height, 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 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.
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.  |  |
Hover |  |  On hover over Close icon button: .png?version=2&modificationDate=1667322760009&cacheVersion=1&api=v2&width=102) | |
Active |  |  | |
Disabled |  |  | |
Error |  | N/A? | |
Warning |  | N/A? | |
Focused |  |  |
...
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.
...
Keyboard | Description | ||
|---|---|---|---|
Tab |
| ||
Shift + Tab | Reverse tab | ||
SpaceFocuses |
| ||
Enter |
| Enter | Focuses
|
Delete | On the trigger button. | Delete | Removes : removes the last pill, de-selecting the tag. On a pill: removes the pill, de-selecting the tag. |
EscRemoves | On the trigger button: N/A On a pill: removes the pill, de-selecting the tag. | ||
Arrows | Left/Right: moves between the pills and trigger button. Up/Down: nothing? |
Auto-complete tag field
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: 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. |
...