Sizing
A chip’s width depends on the length of its label copy. Try to keep copy to 1-3 words (20 characters) maximum. Don’t fix the width of a chip or truncate its text to make it smaller.
How to group chips
Chips are found in groups of three or more to give travellers the choice to filter or choose from different options. One to two chips in an interface on their own aren’t an option as this scenario would call for buttons. Chips work by relying on page context, whereas a button can be static and understood independently.
Types of groups
There are two grouping types for chips; single-select and multi-select.
The difference between these group types is that single-select is for when travellers can only choose one option to filter by. Multi-select is for when there are multiple options to choose from.
Single-select group
Travellers can select one chip at a time, much similar to radio buttons. This is the simplest way to group chips.
Multi-select group
With multi-select, travellers can choose multiple options at once to refine results.
Layout options
Chips can travel on either a horizontal rail or wrap vertically. This is a design decision affected by the amount of content on the page. A horizontal rail of chips is the default layout, which should work for most use cases. Sometimes, you may want to vertically wrap, such as when chips are displayed in a modal.
Horizontal rail
This style of rail is for select and dropdown chips. The interaction allows the traveller to swipe through to reveal the chips. On desktop, buttons appear to avoid the swipe gesture.
Vertical wrap
This style of wrap is used for dismiss chips. All chips that have been selected can be viewed until they’re dismissed/removed. These appear on-screen in the order the traveller selects them.
- Don’t change the chip fill properties
- Don’t use On Image style unless it’s over an image or a map
- Don’t change the chip padding
On image chip
The primary use for this style is over maps, where we know what the map surface looks like. Although they can be used over images, this is problematic if the image has areas of high contrast, as the chips won’t be visible.
Consider more neutral or darker image, or use Default style above the image.
Content guidelines
Chips rely on context to make sense to the traveller so the content often has to do some heavy lifting. This means creating succinct label copy and sometimes leaning on copy within the wider interface to support it.
How to handle chips when they're selected
For drop-down chips, there are a number of ways to display the selected value on the label copy. There aren’t strict guidelines around how to write labels and attribute copy, or how to indicate that values are selected, it all depends on what works for the context of the page.
Do nothing, just rely on 'on' state
Changing the state of the chip to ‘on’ is the most straightforward format for showing an attribute within a drop-down that has been selected.
Display a numerical counter
A counter can be used to represent the number of selected attributes within a filter.
Display selected attribute
This option involves changing the label copy to display the chosen attribute. This only suits scenarios where a single attribute is displayed on the chip.
Display one selected attribute and an ellipsis
If the user has selected more than one attribute, this option allows you to display one of these alongside an ellipsis to suggest that there are more that have been selected.
Don’t show filter label and selected attribute
This option involves changing the selected filter to display both the chip label and chosen attribute copy. We advise avoiding this approach as it can cause readability issues as it’s difficult for the user to scan.
Don’t show multiple selected attributes in one chip
Avoid showing multiple selected attributes within an individual chip as it can become overwhelming.
Don’t truncate content
While front-loading selected attributes may seem logical, it creates a confusing experience due to the limited character count.
How to write label copy
Chips are instrumental in helping the user navigate around the product with ease, so the copy is vital.
- Aim to keep label copy to 1-3 words (around 20 characters).
- It’s OK to ignore traditional grammar conventions for the sake of brevity.
Using icons
Leading icons help add context and visual representation for label copy. There are a few rules to follow:
Be consistent with icon usage
Aim to use the same icons to represent specific themes/locations across the product so the traveller has a consistent and cohesive experience.
Don’t use trailing icons
Only use leading icons when adding a visual representation to label copy. The optional chevron and arrows on drop-down chips are trailing accessories.
Don’t use trailing accessories as leading icons
The chevron and arrow accessories are designed to be used after label copy only.
