An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.
They may be used for a variety of tasks, such as:
Editing
Creating flows
Expand
Collapse
Focus
An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.
Editing
Expansion panels are best used for lightweight editing of an element, such as selecting a value for a setting.
For example, an app that contains tables may use expansion panels to adjust settings on table elements.
Creation flows
Expansion panels may be displayed in a sequence to form creation flows.
For example, a tool for creating ad campaigns may display a series of expansion panels to collect campaign details.
Various expansion panels
List content 15sp Roboto Regular Secondary content 12sp Roboto Regular | Divider 1dp border Expand icon 24dp x 24dp |
A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.
Example of a collapsed panel
Upon selection, a collapsed panel expands, allowing users to add or edit information.
Helper text may be added to the panel to assist the user.
Example of an extended panel
An expansion panel may use a focus state (by using a grey background on the list item) to provide focus to individual list items.
On a keyboard, users may traverse through list items by using the Tab key.
Background
Grey 200
Expand icon on hover and pressed
24dp x 24dp
54% black
Label
Padding
