Components menu
  2. components
  3. behavior
  4. collapsible

Collapsible

The collapsible component is used to put long sections of information under a block that can be expanded or collapsed by the merchant.

Examples

Use for a basic “show more” interaction when you need to display more content.

Drag to resize example

Props

children
React.ReactNode
The content to display inside the collapsible.
idRequired
string
Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop.
openRequired
boolean
Toggle whether the collapsible is expanded or not.

Default collapsible component

Use for a basic “show more” interaction when you need to display more content.

Collapsible on Android

Default collapsible component

Use for a basic “show more” interaction when you need to display more content.

Collapsible on iOS

Best practices

The collapsible component should:

  • Be used for information that is lower priority or that merchants don’t need to see all the time
  • Not be used to hide error messages or other critical information that requires an immediate action

Content guidelines

There are no content elements that are specific to the collapsible component. Follow the content guidelines for cards to make sure your headings, body content, links, and buttons are written consistently and clearly.