Tag

Tag

Usage

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

Behaviour

• 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

Best Practices

• 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

Sizing

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.

States

• 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