Accordion

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

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

<Accordion>
  <AccordionItem
    headerContent={({ isExpanded }) => (
      <Heading as="h4" size="medium">
        {`${isExpanded ? 'Expanded' : 'Collapsed'} Item 1`}
      </Heading>
    )}
  >
    {({ isExpanded }) => (
      <Box
        backgroundColor="neutral.100"
        borderRadius="200"
        mt="400"
        padding="200"
      >
        {`${isExpanded ? 'Expanded' : 'Collapsed'} Content 1`}
      </Box>
    )}
  </AccordionItem>
  <AccordionItem
    headerContent={({ isDisabled }) => (
      <Heading as="h4" size="medium">
        {`${isDisabled ? 'Disabled' : 'Enabled'} Item 2`}
      </Heading>
    )}
    isDisabled
  >
    {({ isDisabled }) => (
      <Box
        backgroundColor="neutral.100"
        borderRadius="200"
        mt="400"
        padding="200"
      >
        {`${isDisabled ? 'Disabled' : 'Enabled'} Content 2`}
      </Box>
    )}
  </AccordionItem>
</Accordion>

Components

Alert