Expander
The Expander pattern organizes content into expandable panels, improving navigation and usability with smooth animations and clear interactive cues.
- Overview
- Specs
- Guidelines
Pattern
The expander pattern is a smart way to keep your interface tidy while managing a lot of content.
It lets you click on panels to expand or collapse them, making it easier to explore details without getting overwhelmed. You’ll often see data tables, text fields, and forms in these panels.
Visual clues, like little arrows, help guide you through each section. Moreover, the smooth animations make the transitions feel natural and keep everything flowing nicely.
- 1: Expander icon
- 2: Expander label
- 3: Button
- 4: Icon
- 5: Overflow menu
- 6: Content
- 7: Secondary button
- 8: Text button
- 9: Informative chip
Used for:
Forms
Expanders can be applied to forms to divide related information (e.g., bank data, personal information);
Modals (form variation)
As with forms, Expanders can be used to divide related information;
Organization
Expanders help break down complex information into manageable sections, making it easier for users to navigate and understand.
Don’t use for:
High frequency of use
In interfaces where users frequently access all the sections, requiring them to constantly expand and collapse the panels can be frustrating and inefficient;
Complex interactions
If interactions in each section are complex or require multiple steps, an Expander can complicate the user experience and increase cognitive load.
All content is equally important
If all sections of the content are equally important and need to be visible at the same time, Expanders may hide critical information from the user.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added elements to pattern;
- Added guidelines to pattern;
Related
Variations
Desktop
.Desktop {
title: var(--subtitle-1);
stroke: var(--grey-5, all);
icons: 24px;
border-radius: var(--x-small-radius);
padding: var(0, --spacing-24, --spacing-24, --spacing-32);
}Mobile
.Mobile {
title: var(--subtitle-1);
stroke: var(--grey-5, top);
icons: 24px;
border-radius: var(--x-small-radius);
padding: var(0, --spacing-4, --spacing-4, --spacing-16);
}States
Enabled
.Hover {
background-color: var(--grey-1);
stroke: var(--grey-5);
icon: var(--grey-7);
label: var(--grey-8);
chip: var(--chip-informative-regular);
}Hover
.Hover {
background-color: var(--grey-2);
stroke: var(--grey-5);
icon: var(--grey-7);
label: var(--grey-8);
chip: var(--chip-informative-regular);
}Focus
.Focus{
background-color: var(--grey-1);
stroke: var(--grey-8);
icon: var(--grey-7);
label: var(--grey-8);
chip: var(--chip-informative-regular);
}Pressed
.Focus{
background-color: var(--theme-10);
stroke: var(--grey-5);
icon: var(--grey-7);
label: var(--grey-8);
chip: var(--chip-informative-regular);
}Error
.Focus{
background-color: var(--theme-10);
stroke: var(--grey-5);
icon: var(--grey-7);
label: var(--grey-8);
errorIcon: var(--error-100, error_circle);
chip: var(--chip-informative-regular);
}Active
.Enabled {
background-color: var(--grey-1);
stroke: var(--grey-5);
icon: var(--theme-100);
label: var(--theme-100);
button: var(--textButton-grey-regular);
icon: var(--grey-7);
overflowMenu: var(--regular);
bottomButtonLeft: var(--secondary-theme-regular);
bottomButtonRight: var(--textButton-grey-regular);
}Active Hover
.Enabled {
background-color: var(--grey-1);
header-color: var(--grey-2);
stroke: var(--grey-5);
icon: var(--theme-100);
label: var(--theme-100);
button: var(--textButton-grey-regular);
icon: var(--grey-7);
overflowMenu: var(--regular);
bottomButtonLeft: var(--secondary-theme-regular);
bottomButtonRight: var(--textButton-grey-regular);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Expanders, often used in forms to organize content into collapsible sections, enhance user experience by reducing visual clutter and focusing attention on relevant information.
By default, the first Expander is usually set to open and immediately display important or introductory content to the user, while the remaining Expanders are kept closed. This default behavior ensures that users can quickly access essential information while still having the flexibility to explore additional details as needed.
Users can click on the header of an Expander to toggle between its open or closed status, allowing them to control the visibility of each section according to their preferences. This dynamic interaction not only makes the form more manageable but also guides users through the form in a logical and intuitive way.
When including required text fields in an expander, be sure to add a red asterisk next to the title to make sure users don’t accidentally skip them.
Additional Actions
When the Expander is closed
Chips are often used to provide brief, informative summaries or indicators that remain visible even when an Expander is closed. These chips can convey important information, such as the status or count of items in the Expander, giving users a quick overview without having to open the section.
Do not change the position of the icon to open or close the Expander.
Do not use + or – instead of the defined icons.
When the Expander is open
Several interactive elements become available to facilitate user’s actions. A primary button can be included for related key actions, whilst an icon, such as an edit icon, allows users to perform specific tasks efficiently.
An overflow menu can be used for secondary actions, ensuring that less frequently used options are available without cluttering the interface. Additionally, bottom buttons are commonly used to create new entries within the Expander, enabling users to add new content seamlessly.
Respect the buttons hierarchy (for example, do not apply primary variations to the header button).
Error handling
The Expander handles errors efficiently by showing an error icon in the closed Expander when there are problems with fields in it. This icon acts as a visual indicator, alerting the user to the presence of errors without the need to immediately open the Expander.
However, once the Expander is open, the error icon disappears, as the fields themselves now directly display their respective error states.
This approach prevents redundancy by ensuring that the error is only communicated once, either via the icon, when the Expander is closed, or through the field’s error message, when the Expander is open, keeping a clean and focused user interface.
Desktop vs Mobile
The Expander adapts seamlessly to both desktop and mobile experiences, with specific variations tailored to each platform. On the desktop, the Expander is usually embedded into the main bodies of the forms, allowing users to interact with additional sections of content while maintaining a structured layout.
In contrast, on the mobile variation, the Expander is used within overlays, such as flyouts or modals, optimizing for limited screen space. This mobile variation ensures the Expander doesn’t overload the interface, allowing users to focus on a section at a time, giving access to deeper layers of content as needed.
Do not apply the desktop variation in flyouts or modals.
Case Studies
Enhancing Lists within Flyouts with image previews
