Chips let travellers enter information, filter options, make choices, and ultimately take action.
There are three types of chips with their own specific uses and behaviours:
A selectable chip simply let the user choose an option. This has an ‘on’ or ‘off’ state.
A dropdown chip open an interface to show value(s) or to make further selections.
A dismissable chip displays a choice inputted by the user. The user can choose to remove the filter if they wish.
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.
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.