Nav open / close arrow
✅ Good to Use!
In Design
This element is in design, and is not ready to be used in the codebase yet.
Marked for Deprecation
This element is marked for deprecation, and should not be used in any future projects.
Content out of date
The content here may be out of date. Talk to a designer for more details.
Deprecated
This element has been deprecated and should not be used.

Accordion

UIAccordion

Usage
Code

Styles

Using this Component

Accordions are expandable sections used for displaying content with a succinct summary view, as well as an expanded detailed view.


Content

Accordions may be used for displaying distinct groupings of content or settings that would be difficult or distracting to display inline. Multiple accordion sections should not be used for content that is related or useful to view simultaneously.


Layout

The top section of an accordion should be reserved for the information that best summarizes or represents its full content.

‍

Structure

Behavior

Accordions are interactive sections that expand/close when clicked on the header summary area. There may be more interactive elements placed within the expanded content area.

Only one accordion section may be open at a time.

Related Components

UIWell

Last Updated

August 6, 2020

Coming soon...

Component code details for this component are not currently available, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.

Eng Description

Code Path & Props

Up to date props can be found at the codepath above.

Example Code