Components
Chip
Chips are selectable or read-only elements usually containing data about a person, a place, or a thing.
When to use
Displaying categorization
Use chips to showcase categories or tags associated with an item
Displaying categorization
Use chips to showcase categories or tags associated with an item
Displaying categorization
Use chips to showcase categories or tags associated with an item
Multiple choices
Use selectable chips when users need to choose from a list of options, especially in scenarios where multiple selections are allowed
Multiple choices
Use selectable chips when users need to choose from a list of options, especially in scenarios where multiple selections are allowed
Multiple choices
Use selectable chips when users need to choose from a list of options, especially in scenarios where multiple selections are allowed
Filtering
Use selectable chips to enable users to apply filters or to refine search easily
Filtering
Use selectable chips to enable users to apply filters or to refine search easily
Filtering
Use selectable chips to enable users to apply filters or to refine search easily
When to avoid
Limited options
If there are only a few static options or the information is straightforward, using chips may be unnecessary
Limited options
If there are only a few static options or the information is straightforward, using chips may be unnecessary
Limited options
If there are only a few static options or the information is straightforward, using chips may be unnecessary
Complex input
For cases requiring more complex input or extensive data, consider alternative UI components like dropdowns or inputs
Complex input
For cases requiring more complex input or extensive data, consider alternative UI components like dropdowns or inputs
Complex input
For cases requiring more complex input or extensive data, consider alternative UI components like dropdowns or inputs
Specifications
Types
Selectable chip
Selectable chips can be used when users have to choose from a list of 2 or more options.
Removable chip
Removeable chips can be used to alter selections in filtering to customize or refine a search more easily.
Selectable chip
Selectable chips can be used when users have to choose from a list of 2 or more options.
Removable chip
Removeable chips can be used to alter selections in filtering to customize or refine a search more easily.
Selectable chip
Selectable chips can be used when users have to choose from a list of 2 or more options.
Removable chip
Removeable chips can be used to alter selections in filtering to customize or refine a search more easily.
Selectable chip
Selectable chips can be used when users have to choose from a list of 2 or more options.
Removable chip
Removeable chips can be used to alter selections in filtering to customize or refine a search more easily.
States
Unselected
Selected
Error
Error selected
Unselected
Selected
Error
Error selected
Unselected
Selected
Error
Error selected
Unselected
Selected
Error
Error selected
Anatomy
1
Icon (Optional)
Icons can be used to help aid text by creating visual cues to nouns.
2
Label
Should identify a name, place, description, or tag.
3
Remove icon
Only used for the removable chip variant (typically to display removable filters or tags).
Value
Chip
Chip