Components
Chips
Chips allow users to enter information, make selections, filter content, or trigger actions.
Anatomy
The Chips component consists of individual chip elements that are typically displayed in a row or a grid-like layout. Each chip element contains text or icons to represent a specific value or option.
- Chips container: The main container that holds all the content.
- Label: A label that describes the chips component.
- Avatar: A graphical element that show an avatar of individual.
- Icon: An icon can be clickable to do certain action.
Usage
To use the Chips component, include the chip elements in your application’s user interface. You can dynamically generate chips based on data or user input, and configure event handlers to respond to interactions with the chips. The Chips component is a versatile UI element that can be used in various scenarios. Here are some instances where you should consider using the Chips component:
When to use
- When you need to visually represent tags, categories, or labels associated with a piece of content
- When users need to make multiple selections from a predefined set of options
- When you want to display a list of items with the ability to remove or interact with individual items
- When you want to showcase user-selected filters or preferences
When not to use
- When the number of items or options is large and may clutter the interface
- When the selected options or values are better represented in a different format, such as a dropdown menu or a list
- When the chips are not interactive and only serve as visual indicators without any further functionality
Accessibility
When implementing the Chips component, it’s important to ensure that it is accessible to all users. Here are some tips for making the Chips component more accessible:
- Use semantic HTML elements to represent each chip, such as <button> or <div>, and include appropriate ARIA roles and attributes.
- Ensure that each chip is focusable and can be activated using keyboard navigation.
- Provide clear and concise text labels for each chip, making it easy for screen readers to identify and announce their purpose.
- Apply contrasting colors and visual cues to highlight selected or focused chips.
- Test the component with assistive technologies to verify its usability and compatibility.
Do
Provide a way to remove or modify selected chips, if applicable.
Don't
Not provide a way to remove or modify selected chips, if applicable.
Content
The content of each chip will depend on the context and purpose of its usage. Here are some general guidelines for creating chip content:
- Keep the text labels short, descriptive, and relevant to the associated value or option.
- Consider using icons or visual indicators to supplement the chip’s content.
- Provide tooltips or additional information for truncated or abbreviated chip labels.
- Use consistent formatting and styling for chips to maintain a cohesive visual presentation.
Do
Use clear, concise labels or icons for each tab element. So it doesn’t causes some confusion and misunderstanding for the users in using Chips component.
Don't
Use unclear, vague labels or icons for each tab element. Because it could causes some confusion and misunderstanding for the users in using Chips component.
Do
Use appropriate spacing and alignment to maintain visual clarity and prevent overcrowding of chips.
Don't
Use inappropriate spacing and alignment to maintain visual clarity and prevent overcrowding of chips.