Expandable section

An expandable section has two main elements.

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.

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.

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

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