An accordion is composed of vertically stacked headers that reveal more
information when triggered.
AccordionItem
AccordionItem is composed of a header and expandable panel content
headerContent must include a Heading component or semantic h\* tag
Expandable panel content is passed as children, and can be either a text
string or a React component
live
<Accordion>
<AccordionItem
headerContent={
<Heading noMargin size="small">
Header
</Heading>
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</AccordionItem>
</Accordion>
Accordion
Accordion is composed of AccordionItems
live
<Accordion>
<AccordionItem
headerContent={
<Heading noMargin size="small">
Simple item
</Heading>
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</AccordionItem>
<AccordionItem
headerContent={
<Heading noMargin size="large">
Custom item
</Heading>
}
iconType="plus-minus"
>
<Box
backgroundColor="neutral.100"
borderRadius="200"
mt="400"
padding="200"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</Box>
</AccordionItem>
</Accordion>
Accordion Internal State
If you need access to the internal state of each accordion item, you can use a
render prop. It provides 2 internal state props: isExpanded and isDisabled.
These internal state props are available for both children and
headerContent.