# Accordion component for Stripe Apps Use accordions to split long or complex content into collapsible chunks. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/accordion?app-sdk-version=8. To add the `Accordion` component to your app: ```js 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 props | Property | Type | | ---------- | ------------------------------------------------------------------------- | | `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 `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 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. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/accordion?app-sdk-version=9. To add the `Accordion` component to your app: ```js 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 props | Property | Type | | ---------- | ------------------------------------------------------------------------- | | `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 `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 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. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)