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

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.

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.
proptyperequireddescriptiondefault
disabledboolean | nullfalse
Whether or not the collapsible can be expanded or collapsed
null
fullBleedboolean | nullfalse
Used to unset the left and right padding of the Collapsible
false
onRequestExpandedChange((expanded: boolean) => void) | nullfalse
The event fired when the collapsible's expanded state changes
null
expandedboolean | nullfalse
Whether or not the collapsible is open, this makes the component controlled
null
defaultExpandedboolean | nullfalse
The default expanded state of the Collapsible - used for uncontrolled components
null
collapsibleIdstring | nullfalse
Used when a collapsible is used inside of an Accordion for tracking the open state of each panel
null
headingNonNullable<string | ReactElementLike | null> | nullfalse
Used to render the contents of the generated CollapsibleSummaryButton
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.
proptyperequireddescriptiondefault
disabledboolean | nullfalse
Whether or not the collapsible can be expanded or collapsed
null
fullBleedboolean | nullfalse
Used to unset the left and right padding of the Collapsible
false
onRequestExpandedChange((expanded: boolean) => void) | nullfalse
The event fired when the collapsible's expanded state changes
null
expandedboolean | nullfalse
Whether or not the collapsible is open, this makes the component controlled
null
defaultExpandedboolean | nullfalse
The default expanded state of the Collapsible - used for uncontrolled components
null
collapsibleIdstring | nullfalse
Used when a collapsible is used inside of an Accordion for tracking the open state of each panel
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

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


Published: Jan 7, 2022Last updated: Sep 18, 2024