Tag
Last updated
Was this helpful?
Last updated
Was this helpful?
The Tag component represents an interactive keyword that helps to label and organise content. Tags can be added or removed from an element by the user from a closed (predefined values) or open (custom keywords can be defined by the user) set of data. Tags can be displayed on the user interface as standalone elements, or as a group inside the multi tag dropdown component.
Standalone Tag Component
Tag Component Used in Multi tag Dropdown
When writing text inside the input that has the ability to display tags (multi tag input), hitting enter should convert the text into a tag
When choosing from a closed data set of tags, the available options can be displayed in the dropdown menu list when the user clicks the field, and can be filtered when they start typing
Choosing an item from the dropdown menu list adds the tag with selected item text to the multi tag input field and stops showing selected option in the dropdown menu list
Tag text label is not clickable, only the 'x' button for removing the tag is interactive and changes background colour on hover
Accessibility should be ensured by allowing the keyboard navigation between the selected tags in the list so that they can be removed
Use tags when the content can be mapped into multiple categories and does not necessarily only fit into one hierarchical category, or when more than one option can be set as a required input
Use tags when you want to allow users to create and organise their data themselves; however, defining long label values is not recommended
Tags should always be presented close to, or within, the input control that allows users to add and remove tags; recommended use for this is the multi tag dropdown component
When validating tags, the field or a certain tag within the field can be validated based on the use-case; using both validations at the same time can introduce confusion as to what needs to be fixed, so the use of contextual feedback messages is encouraged
Tag comes in one size only as it is a UI element with relatively small width and height. The interactive area for removing a tag should be clearly indicated.
Default background colour is Blue L80, with text and icon colour Blue Base
Hover icon background is Blue L60, and focus 2px shadow Blue L60
Disabled background colour is Grey L80 and font colour is Grey L20, with icon Grey L40
Danger background colour is Red L80, with text and icon colour Red Base
Danger hover icon background is Red L70, and focus 2px shadow Red L50
