<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Collapsible

A Collapsible is a section that can be toggled open and closed. It is typically grouped with other Collapsible into an Accordion.
styleKeys: accordion

Use Collapsible...

  • To present a large amount of content in a compact form.
  • To prevent information overload by allowing users to expand only the section they are interested in.
  • Use as part of an Accordion for showing multiple Collapsibles

Don't use Collapsible...

  • To display critical information. Use a Modal Dialog instead.
  • To present a small amount of content where the benefit of collapsing/expanding is minimal. Use a Card instead.

Basic Collapsible

Use the BasicCollapsible Convenience Component for the most common use-cases.

The preview has been updated.

Collapsible

Use Collapsible with different properties to build your own when the Convenience Component doesn’t match your needs.

The preview has been updated.

Text Closed / Text Open summary

Use CollapsibleSummaryTextClosed and CollapsibleSummaryTextOpen inside CollapsibleSummary to enable a different summary text depending on whether the Collapsible is collapsed or expanded.

The preview has been updated.

Default expanded

Use defaultExpanded to present the Collapsible as expanded by default.

The preview has been updated.

Disabled

Use disabled to prevent the Collapsible from expanding.

The preview has been updated.

Full Bleed

Use fullBleed to remove the right padding of the content within the Collapsible.

The preview has been updated.

Managing state

Controlling the state of a Collapsible is only necessary if there's a need to read or write its state from another component. This requirement is rather uncommon.

In the React API, use expanded to indicating whether the Collapsible should be expanded or not.

Use the onRequestExpandedChange prop on the Collapsible to be notified when it wants to expand or collapse. This handler is invoked with the following argument:

  • expanded: to indicate whether the Collapsible seeks to be expanded or not.

The preview has been updated.

Accessibility

Collapsible requires some props set for accessibility compliance:

  • Both BasicCollapsible and Collapsible are required to set the headingLevel prop to specify the heading tag (h1-h6) used to wrap the summary.
    • Note this can be set to null when using BasicCollapsible or Collapsible in a nav sidebar where you shouldn't be using HTML headings.

In the Vanilla API, for each swan-collapsible-summary-button, add the following attributes:

  • aria-expanded: set this attribute to true or false to indicate whether the accordion is expanded or collapsed.
  • aria-controls: assign to this attribute the same ID value as the swan-collapsible-content section it controls.

In the React API, those attributes are handled for you.

Content

Use concise language for each summary to clearly indicate what is in its content, upon expanding the section.

Heading flexibility

Collapsible is flexible enough to support custom heading content and arrangements.

The preview has been updated.

Icons in Collapsible

An Icon can be placed inside CollapsibleSummaryButton. The order of the icon and label will match their DOM order.

The preview has been updated.

Props

BasicCollapsible
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddefault
disabled
Whether or not the collapsible can be expanded or collapsed
boolean | nullfalse
false
fullBleed
⚠️ Deprecated - This prop is deprecated without a replacement as full bleed is now the default behaviour.
boolean | nullfalse
false
onRequestExpandedChange
The event fired when the collapsible's expanded state changes
((expanded: boolean) => void) | nullfalse
null
expanded
Whether or not the collapsible is open, this makes the component controlled
boolean | nullfalse
null
defaultExpanded
The default expanded state of the Collapsible - used for uncontrolled components
boolean | nullfalse
false
collapsibleId
Used when a collapsible is used inside of an Accordion for tracking the open state of each panel
string | nullfalse
null
headingLevel
Specifies the heading tag (h1–h6) used to wrap the summary button for accessible markup
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | nullfalse
null
heading
Used to render the contents of the generated CollapsibleSummaryButton
string | ReactElement<any, string | JSXElementConstructor<any>> | nullfalse
null
Collapsible
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddefault
expanded
Whether or not the collapsible is open, this makes the component controlled
boolean | nullfalse
null
onRequestExpandedChange
The event fired when the collapsible's expanded state changes
((expanded: boolean) => void) | nullfalse
null
fullBleed
⚠️ Deprecated - This prop is deprecated without a replacement as full bleed is now the default behaviour.
boolean | nullfalse
false
defaultExpanded
The default expanded state of the Collapsible - used for uncontrolled components
boolean | nullfalse
false
collapsibleId
Used when a collapsible is used inside of an Accordion for tracking the open state of each panel
string | nullfalse
null
disabled
Whether or not the collapsible can be expanded or collapsed
boolean | nullfalse
false
headingLevel
Specifies the heading tag (h1–h6) used to wrap the summary button for accessible markup
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | nullfalse
null
CollapsibleSummary
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
CollapsibleContent
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
CollapsibleSummaryButton
This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
CollapsibleSummaryTextClosed
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
CollapsibleSummaryTextOpen
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.

Related