Types

Accordion

Use an Accordion to reduce page length or scrolling by the user when a single content block would require too much space.

Expand

Use an expand to reduce page length or scrolling by the user when a block of text would require too much space.

Collapsible state

CollapsibleTrigger also exposes the open/close state via render props (or context for advanced usage).

Props

Collapsible
NameTypeDescription
gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>-
collapsedHeightTLengthStyledSystemHeight (in px if number) when panel is closed
animateOpacitybooleanAdds a fade effect

Accessibility

  • Ensure your CollapsibleTrigger is focusable
  • An id is generated if one is not provided
  • CollapsibleTrigger adds aria-controls that points to it's associated panel
  • CollapsiblePanel adds aria-labeledby that points to it's associated trigger