Expandable section

An expandable section is a content section with a text toggle that reveals content that is hidden by default.

Elements

An expandable section has two main elements.

Elements of expandable section
  1. Caret: Indicates whether the section is expanded or collapsed.
  2. Toggle text: Informs the user what will be shown when the component is expanded.

Usage

Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal charts, cards, data lists, or table views. Expandable sections may be used in alerts to show additional information.

We recommend using the dynamic toggle text when designing with the expandable section. Dynamic toggle text will update based on the state of the expandable section. For example, it may read Show more when the toggle is collapsed, and Show less when the toggle is open.

Variations

Expandable section with blue line

Use an expandable section with a blue border to add more visual weight. This variation is recommended for marketing purposes.

Disclosure example

Expandable section in a form

Expandable section in a form

Expandable section in an inline alert

Expandable section in an inline alert

Expandable section in a side panel

Expandable section in a side panel

Expandable section in a documentation page

Expandable section in a documentation page

For more information regarding accessibility, visit the expandable section accessibility tab.