Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Tags should always include a label. These can represent search terms, filters, or keywords.
Tags have the option to include an avatar in addition to the label. These should be used to represent entities.
Tags have the option to be removable or not. Removable tags have a small close (“x”) button.
A tag can be marked as having an error to show that it has become invalid.
A tag in a disabled state shows that a tag exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a tag may become available later.
Tags have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
yes / no
yes / no
yes / no
yes / no
yes / no
When the tag text is too long for the available horizontal space, it truncates. The full text should be revealed with a tooltip on hover.
When horizontal space is limited in a tag group, the individual tags wrap to form another line.
In some instances, it's possible to add an action next to a group of tags to provide a way to easily take an action on the entire group at once. Make sure to reveal the action only when there is more than one tag displayed.
In cases where users cannot interact with a large group of tags, consider hiding the group and its greater construct rather than disabling all of the individual tags.
For RTL (right-to-left) languages, the layout of the tag is mirrored. The avatar is right-aligned and the close button is left-aligned.
|Tab||Tabbing into a group of tags places the focus on the first tag (only one tag receives the keyboard focus at a time).|
|Left, Right, Up, Down Arrows||Moves focus through the group of tags.|
|Page Up or Page Down||Moves focus to the previous or next tag in the group (last becomes first, and first becomes last).|
|Home or End||Moves focus to the first or last tag in the group.|
|Backspace, Delete, or Space||Removes the tag in focus from the group.|
|Feb 26, 2020||6.1.0|
|Sep 11, 2019||6.0.0|
|Aug 22, 2019||5.1.0|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.