The Tag: Categorizing and Organizing Content
The Tag component represents metadata, labels, or categories within your user interface, enabling users to filter, sort, or group items.
Features
Discover the key features of the Tag component.
Efficient Tagging
Tag enables efficient labeling, enhancing content organization and facilitating quick retrieval of tagged items. Users can effortlessly add descriptive tags to items, improving categorization and search ability within the system.
Intuitive Interaction
Users can easily add and manage tags, improving usability and simplifying the process of organizing content. With intuitive tag input functionality, users can quickly label items with relevant tags, streamlining their workflow and enhancing productivity.
Customizable Design
Tailor tag input styles to match interface seamlessly, ensuring consistency and alignment with your brand's visual identity. Customize tag input components to suit different design themes or preferences, enhancing overall interface appeal and user experience while maintaining a cohesive design language.
Anatomy
Field Label
A descriptive label positioned above the input field, informing users of the data required.
Input Field
The primary container where tags are displayed and user interactions happen.
Nested Tag Group
Predefined groups of tags that can be selected and displayed within the input field.
Help Description Label
A label that offers supplementary information or guidance related to the data input.
Example Use Cases
Content Organization
Tagging content items such as articles, blog posts, images, or products with relevant keywords or categories to facilitate organization and navigation.
Filtering and Sorting
Enabling users to filter and sort content based on specific tags or attributes, allowing them to quickly find relevant information or items.
Data Visualization
Utilizing tags to visually represent data points or categories in charts, graphs, or reports, providing a concise summary of key insights or trends.
User Interface Elements
Integrating tags into user interface elements such as cards, lists, or tables to enhance the visual representation of items and improve user interaction.
Workflow Management
Tagging tasks, documents, or discussions in project management or collaboration tools to classify and track progress, status, or priority levels.
User Preferences
Allowing users to create custom tags or labels to personalize their experience, organize saved items, or categorize preferences.
Guidelines for Usage
When implementing the Tag component in designs, consider the following guidelines to ensure consistency, clarity, and usability:
Color and Styling: Use visually distinct colors, shapes, or styles to differentiate tags and make them easily recognizable. Ensure that the color scheme aligns with the overall design system and conveys meaning or context associated with each tag.
Clear Labeling: Keep tag labels concise, descriptive, and relevant to the tagged item or category. Use clear language and avoid ambiguity to ensure that users understand the purpose or meaning of each tag.
Consistent Size: Maintain consistent size and spacing for tags to create a cohesive visual hierarchy and improve readability. Avoid overly large or small tags that may disrupt the layout or cause visual clutter.
Accessibility: Ensure that tags meet accessibility standards by providing sufficient color contrast, text legibility, and interactive elements for users with disabilities. Use accessible design practices to enhance tag usability for all users.
Interactive Behavior: Implement interactive behavior such as hover effects, clickability, or tooltip displays to provide additional context or actions associated with tags. Ensure that interactive elements are intuitive and responsive across different devices and input methods.
Tag Management: Allow users to easily add, edit, remove, or filter tags as needed to customize their experience and manage tagged content efficiently. Provide clear feedback and confirmation messages to guide users through tag-related interactions.
Scalability: Design tags to be scalable and adaptable to varying content lengths, screen sizes, and usage scenarios. Consider responsive design principles to ensure that tags remain functional and visually appealing across different viewport sizes and device orientations.
Sizes
.input-large
A larger size for the component, ensuring it stands out and is easily noticeable, often used for primary actions or important interactions to draw user attention.
.input-extra-large
The largest size for the component, making it highly prominent and easy to interact with, often used in high-impact areas or for very important actions.
States
.input :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.input :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.input :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.input: success
The state indicating a successful action or positive result, often highlighted with a specific color like green or an icon like a checkmark to reinforce the success message.
.input: error
The state indicating a problem or error, usually highlighted with specific colors like red and icons such as an error symbol to signal an issue that needs resolution.
.input: *disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Do use Tag Inputs when a user's input is better represented through categorized tags.
Do ensure the provided nested instances (tag groups) are contextually relevant to the user task.
Do provide clear placeholders to guide user interactions.
Don't:
Don't use the Tag Input as a replacement for simple text inputs where tags don't provide additional clarity.
Don't overcrowd the input with too many nested instances; keep it relevant and user-friendly.
Don't ignore state changes; provide visual feedback for all states (hover, focus, success, error) to enhance user experience.