Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags can be added or removed from an object by merchants.
Use to signify the attributes of an object.
- Be presented close to or within the input control that allows merchants to add and remove tags
- To show the status of an object, use the badge component
- To add and remove tags, use the text field component
See Material Design and development documentation about accessibility for Android:
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
The button to remove a tag is automatically given a label using aria-label so that screen reader users can distinguish which tag will be removed.
The control to remove a tag is implemented as a button with standard keyboard support.
- Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
- To activate a button, press the enter/return or space key
When a merchant uses the button to remove a tag, it is important to make sure that keyboard focus is managed. Moving focus to the next element in the page is recommended.