:#ff5630} html[data-color-mode=dark] [data-colorid=z72fe31qwu]{color:#cf2600}: Carlie Bradshaw
| Table of Contents | ||||
|---|---|---|---|---|
|
...
Type | Usage | Image |
Browsable list | Users may not know what the options are, and need to browse the entire list of possible 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 possible 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 selectormenu.
a tag menu, containing:
a Search field.
a list of all available tags, each including:
a label.
a checkbox.
a scrollbar, where needed.
...
the tag field, containing:
applied tag pills, showing the tags already selected.
a text fieldinsertion 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).a scrollbar, where neededoptional).
Default State
Where appropriate, tags may be pre-applied by default.
...
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 Where there is no more space for additional pills, either: a Scrollbar
mayshould 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.On hover, all of the individual additional tags will be shown in a Tooltip.
On click, the 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.
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 |
...
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).
...
Auto-complete
...
Validation and Errors
The tag menu should show an empty state when a search has no matching tags.
...
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 tag 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.
...