Developer mode
Opens components on the React tab by default.
Your bookmarks

Collapse

Hides long or complex information under a block that can be hidden.

Too much information at once overwhelms users, which is why Orbit is based around progressive disclosure. Collapse components help by keeping content off of the initial screen but still only a tap away.

Use them when you have content that isn’t necessary to the main flow but still might interest users, such as details about a passenger or options for filtering a search. If there are actions involved, consider using a popover for simple actions or a modal for more complex ones.

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Label: clearly indicates what can be hidden/shown; actions: optionally creates an area for actions that relate to the entire contents; collapse controller: indicates the state, which can be expanded or not.

Guidelines

Use for less essential information       

Because it requires an extra interaction, information inside a collapse won’t be seen by all users. So it’s a great container for extra information that adds context that some users might want but no users will absolutely require. 

Don’t use it to hide errors or anything else that might block a user’s flow. Remember that they might not choose to open it.

Make content clear from label

The label is the first thing all users will see, and the only thing most of them will see. Make sure it’s clear what the collapse contains so they know whether they want to see more.

Keep the label short but clear. Focus on nouns describing what the collapse contains.

Transport
Stops
Collapse principles
What different kinds of transport to search
How many stops are OK?
Read more (about the principles behind collapse components)

Related components

Card

Collapses work well for simple information. If you have more information, consider structuring it with card sections (which can be expanded and collapsed).

Popover

Collapses keep information hidden but still on the screen. If you’d like to present information or choices outside the scope of the current screen, consider a popover.

Tooltip

Collapses work well for information that can be contained in a few paragraphs. If your information is very short or you need to add explanations to specific elements on the screen, consider a tooltip.

Dialog and modal

Collapses work well for static information or filters related to what’s on screen. To add actions that are outside the main flow, consider a dialog (for simple actions) or modal (for more structure or options).