Chips allow travellers to enter information, filter options, make choices, and ultimately take action.
There are three types of chips with their own specific uses and behaviours:
These chips let the user select an option. This has an ‘on’ or ‘off’ state.
These chips open an interface to choose a value or make further selections.
These chips display a choice that the user can interact with to remove.
There are three styles of chips with each having a corresponding surface.
This works in most situations. The chip has no fill, so this works with Surface-Default, and Canvas-Default + Canvas-Contrast options.
This is a reversed style that works with Surface-Contrast.
This style is to be used over complex surfaces like maps or images.
An optional leading icon can be used if it adds a visual description of the copy on the label.
There are only two trailing icons we support and each is specific to a chip type.
- Dropdown chip uses a chevron icon.
- Dismissible chip uses a close icon.
States (selectable and dropdown)
This is the resting state of the chip.
This indicates that interaction is available for people using pointer devices.
This is the active or chosen state of the chip.
The disabled state indicates that an action can’t be taken until a previous action is completed.
Dismissible chips differ in that they have no off-state. The chip is removed, and the screen is refreshed when dismissed.