Accordion

Use accordions to split long or complex content into collapsible chunks.

SDK version

To add the Accordion component to your app:

import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui';

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>
  <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>

Accordion props

Property Type

Property	Type
`children`	Required `React.ReactNode` One or more AccordionItem components.

children

Required

React.ReactNode

One or more AccordionItem components.

AccordionItem

Accordion components contain one or more AccordionItem components.

AccordionItem props

Property	Type
`children`	Required `React.ReactNode` The contents of the component.
`title`	Required `React.ReactNode` A title describing the accordion item.
`actions`	Optional `React.ReactNode` A component containing actions that a user can take on the item. If there are more than 2 actions, use an overflow menu to show the rest.
`defaultOpen`	Optional `boolean \| undefined` Whether or not the item should be open on the first render.
`media`	Optional `React.ReactNode` A component containing an optional image or icon to help identify the item.
`onChange`	Optional `((isOpen: boolean) => void) \| undefined` Callback when the open state has changed.
`subtitle`	Optional `React.ReactNode` 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.

<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>

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.

<Accordion>
  <AccordionItem
    media={<Img src="https://example.com/bank.svg" />}
    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>

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.

const titles = ['Example using a link', 'Example using a button', 'Multiple buttons are cool too'];
const actionExamples = [
  <Link onPress={() => null}>Edit</Link>,
  <Button onPress={() => null}>Configure</Button>,
  <ButtonGroup>
    <Button onPress={() => null}>Action 1</Button>
    <Button onPress={() => null}>Action 2</Button>
  </ButtonGroup>,
];

<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>

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.

<Accordion>
  <AccordionItem
    title="Orangesss"
    actions={<Button disabled onPress={() => null}>Edit</Button>}
  >
    <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
  </AccordionItem>
</Accordion>