Accordion component for Stripe Apps
Use accordions to split long or complex content into collapsible chunks.
SDK version
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:
Loading example...
<Box css={{backgroundColor: 'surface'}}>
<Accordion>
<AccordionItem title="Apples">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
<AccordionItem title="Bananas">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
<AccordionItem title="Peaches" subtitle="A subtitle can be provided">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
</Accordion>
</Box>
Accordion props
| Property | Type |
|---|---|
children | Required React.ReactNode One or more AccordionItem components. |
AccordionItem
Accordion components contain one or more AccordionItem components.
AccordionItem doesn’t add padding around its children. Wrap the item contents in a Box and set padding, such as css={{padding: 'xlarge'}}, when the expanded content needs spacing from the item edges.
This is useful when the item contents include layout primitives like Box, Divider, lists, or multiple rows of content.
AccordionItem props
| Property | Type |
|---|---|
children | Required React.ReactNode The contents of the component. |
title | Required React.ReactNode A title describing the AccordionItem. |
actions | Optional React.ReactNode A component containing actions that a user can take on the AccordionItem. If there are more than 2 actions, use an overflow menu to show the rest. |
defaultOpen | Optional boolean | undefined Whether or not the AccordionItem should be open on the first render. |
media | Optional React.ReactNode A component containing an optional Img or Icon to help identify the AccordionItem. |
onChange | Optional ((isOpen: boolean) => void) | undefined Callback when the open state has changed. |
subtitle | Optional React.ReactNode An optional subtitle with additional 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.
Loading example...
<Box css={{backgroundColor: 'surface'}}>
<Accordion>
<AccordionItem title="Apples">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
<AccordionItem title="Bananas">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
<AccordionItem title="Oranges">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
<AccordionItem title="Peaches" subtitle="A subtitle can be provided">
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
</Accordion>
</Box>
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.
Loading example...
<Box css={{backgroundColor: 'surface'}}>
<Accordion>
<AccordionItem
media={<Icon name="chat" />}
title="ACH credit transfer"
subtitle="ACH Credit Transfer enables US customers..."
>
<Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
</AccordionItem>
<AccordionItem
title="Cards"
subtitle="Accept Visa, Mastercard, American Express..."
>
<Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
</AccordionItem>
<AccordionItem
title="Apple Pay"
subtitle="Manage Apple Pay domains and certificates."
>
<Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
</AccordionItem>
</Accordion>
</Box>
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.
Loading example...
const titles = [
'Example using a link',
'Example using a button',
'Multiple buttons are cool too',
];
const actionExamples = [
<Link key={0} onPress={() => null}>
Edit
</Link>,
<Button key={1} onPress={() => null}>
Configure
</Button>,
<ButtonGroup key={2}>
<Button onPress={() => null}>Action 1</Button>
<Button onPress={() => null}>Action 2</Button>
</ButtonGroup>,
];
return (
<Box css={{backgroundColor: 'surface'}}>
<Accordion>
{[0, 1, 2].map((i) => (
<AccordionItem
title={titles[i]}
subtitle={i > 2 && 'An optional subtitle can be provided.'}
actions={actionExamples[i]}
key={i}
>
<Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
</AccordionItem>
))}
</Accordion>
</Box>
)
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.
Loading example...
<Box css={{backgroundColor: 'surface'}}>
<Accordion>
<AccordionItem
title="Orangesss"
actions={
<Button disabled onPress={() => null}>
Edit
</Button>
}
>
<Box css={{padding: 'xlarge'}}>Accordion contents</Box>
</AccordionItem>
</Accordion>
</Box>