Collapsible
Collapsibles are used to collapse and expand content inline on a page. This lets users progressively disclose information as desired.
Also known as:
ExpandableAccordionShow and hideRevealDisclosure
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Slider
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- We usually start collapsibles in a collapsed position by default so that users can see what's available.
- We often avoid accordions, which are a specific type of collapsible that allows only 1 section open at a time and is often an annoying constraint on user interaction.
Options
- Collapsible group: a group of related collapsible sections that may be combined or separated by whitespace.
- Single collapsible: a standalone collapsible for 1 item of content.
- Header:
- Default header: provide plain text for a title to use default styling.
- Custom header: supply your own header content and styling for the header and title.
- Lazy-loading: when handling lots of data, you might lazy load collapsible content for performance reasons. This might limit animation.
- Sticky header: when the user scrolls down a long way, they can keep context of where they are by looking at the sticky header. They may also collapse a long section easily using the sticky header.
We don't yet support:
- Accordion: a collapsible group that only allows 1 section to be open at a time.
- Show/hide button for outside of the collapsible group.
To keep in mind
- Chevron:
- We only support chevron on the right. We show a downwards chevron when section is closed and upwards when open.
- Avoid multi-level expansions.
- Animation: we animate expansion using a reveal animation (see animation for guidance on timing and variable height animations).
When to use and when not to use
When to use
- Use collapsibles when many users want an overview and some users want to dig into specific parts.
- Use accordion when it’s extremely important to focus on one single thing at a time.
When not to use
- Use a Table when there’s a consistent heading and tabular data.
See also
- You might want to show and hide text with truncation using a control that says “Show more” or similar. We don't yet support that and it might belong to the Text component instead.