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
On hold
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
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.