Accordion

The Accordion component allows information to be displayed / hidden on a page behind a toggleable header.

Polymorphic Component

By default, content is rendered inside a <section>, but this can be overridden by passing any valid tag name or component with the as prop.

Examples

Defaults

<Accordion>
  <AccordionSummary>
    Accordion summary with text toggle
  </AccordionSummary>
  <AccordionContent>
    ...
  </AccordionContent>
</Accordion>

Small header, small and large content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien enim, rutrum quis tristique ut, ultrices vitae nibh. Sed feugiat orci vel hendrerit accumsan

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien enim, rutrum quis tristique ut, ultrices vitae nibh. Sed feugiat orci vel hendrerit accumsan

<Accordion open toggleType={"text|icon"}>
  <AccordionSummary size={"small|large"}>
    Accordion summary, text type, small header, small content
  </AccordionSummary>
  <AccordionContent size={"small|large"}>
    ...
  </AccordionContent>
</Accordion>

Large header, small and large content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien enim, rutrum quis tristique ut, ultrices vitae nibh. Sed feugiat orci vel hendrerit accumsan

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien enim, rutrum quis tristique ut, ultrices vitae nibh. Sed feugiat orci vel hendrerit accumsan

<Accordion open toggleType={"text|icon"}>
  <AccordionSummary size={"small|large"}>
    Accordion summary
  </AccordionSummary>
  <AccordionContent size={"small|large"}>
    ...
  </AccordionContent>
</Accordion>

Enums

AccordionSize

Key	Value
Small	"small"
Large	"large"

AccordionToggleType

Key	Value
Icon	"icon"
Text	"text"

Props

Accordion

Name	Type	Default Value	Required	Description
defaultOpen	boolean	false	No	Should the uncontrolled Accordion default to open?
onToggle	((open: boolean) => void)		No	Fires when the open/closed state of the Accordion changes.
open	boolean	false	No	Is the accordion open?
toggleType	"text" | AccordionToggleType | "icon"	{AccordionToggleType.Text}	No	Show text or a button for the toggle?

Accordion Summary

Name	Type	Default Value	Required	Description
size	"small" | AccordionSize | "large"	AccordionSize.Small	No	What size to render the accordion content

AccordionContent

Name	Type	Default Value	Required	Description
size	"small" | AccordionSize | "large"	AccordionSize.Small	No	What size to render the accordion content