Collapsible

The collapsible component is used to put long sections of information under a block that merchants can expand or collapse.

Props

No props found for this component, run `yarn gen:docs` to generate component meta first.

Slots

No slots found for this component, run `yarn gen:docs` to generate component meta first.

Events

Collapsible events

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

Collapsible containers are cards with expandable and collapsible functionality, and should follow the content guidelines for cards.

---

Related components

• To control a collapsible component, use the button component
• To put long sections of information in a container that allows for scrolling, use the scrollable component

---

Accessibility

Use the collapsible component in conjunction with a button. Place the collapsible content immediately after the button that controls it, so merchants with vision or attention issues can easily discover what content is being affected.

• Use the required id prop of the collapsible component to give the content a unique id value
• Use the ariaExpanded prop on the button component to add an aria-expanded attribute, which conveys the expanded or collapsed state to screen reader users
• Use the ariaControls prop on the button component, and set its value to the id value of the collapsible component