Input chip
v2.1
Input chips help users quickly select validated input values.
- Skin
- Marko
- React
Input chips help users quickly select validated input values.
On small screen web, input chips are presented inside of a combobox or as a chip group. On native applications, input chips are presented as a chip group with a button that launches a search view.
Input chips ensure users can only select from validated values.
Chips are light and easy. They’re quick to scan, simple to tap, and always in support of the content.
Input chips can surface popular values for users to quickly select without navigating to a new surface.
A title is required for all chips. The title represents the discrete, validated value submitted within a form or experience.
Input chips are ideal for adding or selecting items like tags, categories, and preferences. They’re useful for reinforcing the availability of a value and allowing for quick add or remove actions.
Input chips leverage our state layer tokens for state animations.
Chips have a minimum width of 56px and a max width of 320px before the title is truncated. If input chips are nested within a text field narrower than 336px they’ll extend the full width of the field minus padding.
The chips combobox on web converts values to chips within the field as users select and enter values. Refer to the combobox page for additional details.
Do reserve input chips for input views.
Don’t stack input chips below filter chips. This can overwhelm and confuse users.
Input chips can be surfaced by default on a page to allow for quickly selecting and deselecting multiple values.
Video description: An animation of the input chip component interaction and its specific micro-interactions. This example shows the interaction on the chip container scaling down and using a micro-interaction on the "+" icon rotating into an "x" icon, the background color of the chip also fills in to its active state using a circular masking transition, and the contents fade to their active color variant as well. On deselection of the filter, the "x" reverts back to a "+" icon, and the background swaps back to its idle state.