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.
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.
Collapses work well for simple information. If you have more information, consider structuring it with card sections (which can be expanded and collapsed).
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.
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).