Accordion component for Stripe Apps
Use accordions to split long or complex content into collapsible chunks.
To add the Accordion component to your app:
Accordions help a user to quickly scan a collection, identify elements, and access more details without leaving the context that they’re working in.
This is a preview of an Accordion component with three AccordionItem components inside:
Accordion props
| Property | Type |
|---|---|
| Required
One or more |
AccordionItem
Accordion components contain one or more AccordionItem components.
AccordionItem props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Required
A title describing the |
| Optional
A component containing actions that a user can take on the |
| Optional
Whether or not the |
| Optional
A component containing an optional |
| Optional
Callback when the open state has changed. |
| Optional
An optional subtitle with addition descriptive information. |
Titles and subtitles
Label all AccordionItem components with a title that uniquely identifies the item. You can also use an optional subtitle to provide a description or additional relevant information.
Media
The AccordionItem component can contain a media element to show a relevant icon or image that helps the user identify the item. Only include media when it helps users identify items and when there’s a strong association between the media and the item itself.
Actions
You can represent actions that an item can have performed on it with buttons or links placed on the right-hand side of the accordion trigger.
Disabling items
Instead of removing a user’s ability to interact with disabled accordion items, disable the associated actions while still presenting as much information within the item as possible to the user.