What is a tag in UX design?
A tag is a small text label, typically rendered as a rounded pill or chip, that is attached to a piece of content to categorize it, indicate its attributes, or enable filtering and search. Tags appear on blog posts to indicate topics, on issues in project management tools to indicate priority or type, on products in e-commerce to communicate attributes, and on contacts in CRM systems to segment them. Tags are also used as an input pattern in forms where users can add multiple freeform or predefined labels to a record by typing and selecting, with each selected label appearing as a removable chip.
How do tags differ from categories?
Categories typically represent a hierarchical, mutually exclusive classification system where each piece of content belongs to exactly one category at each level. Tags typically represent a flat, non-exclusive labeling system where each piece of content can have any number of tags from any combination. A blog post might belong to one category, such as Design, but have multiple tags such as typography, accessibility, and mobile. Categories provide structure; tags provide flexibility and cross-cutting organization that works well for content that touches multiple themes simultaneously. The distinction matters for navigation design: category navigation is hierarchical, while tag navigation is associative.
How to design tag input components?
Tag input fields allow users to add multiple values to a field, with each selected value displayed as a removable chip within the input. As users type, the component typically shows autocomplete suggestions from a predefined list, a freeform entry option, or both. Each tag chip should have a visible remove button. The input should communicate how many tags are allowed if there is a limit. Tags added in error must be removable without clearing the entire field. The full set of tags must be navigable by keyboard, with each tag reachable and deletable using arrow keys and Backspace or Delete without a mouse.