components

Accordion (design)

An accordion component is a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

code

design

About accordions

Accordions are composed of a list of items, with a header button that can be clicked to toggle the visibility of extra content.

Behaviour

Each item's header is focusable
Content's visibility can togglebale by pressing Enter and Space

Accordion item 1

Accordion item 2

Accordion item 3

<Accordion id="myAccordion">
  <AccordionItem title="Accordion item 1">
    <Flex
      flexDirection="column"
      justifyContent="space-between"
      alignItems="flex-start"
    >
      <TextField label="My form" />
      <Button mt={5}>Submit</Button>
    </Flex>
  </AccordionItem>
  <AccordionItem title="Accordion item 2">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Accordion item 3">
    <img
      src="http://placekitten.com/500/200"
      alt="cat"
      style={{
        maxWidth: '100%',
        height: 'auto',
        width: 'auto',
      }}
    />
  </AccordionItem>
</Accordion>

<Accordion id="myAccordion">
  <AccordionItem title="Accordion item 1">
    <Flex
      flexDirection="column"
      justifyContent="space-between"
      alignItems="flex-start"
    >
      <TextField label="My form" />
      <Button mt={5}>Submit</Button>
    </Flex>
  </AccordionItem>
  <AccordionItem title="Accordion item 2">
    <Paragraph>
      Morbi varius sed libero pulvinar faucibus. Fusce molestie nisi id tellus
      dignissim, quis elementum urna varius. Phasellus blandit volutpat diam,
      non fringilla purus ornare id.
    </Paragraph>
  </AccordionItem>
  <AccordionItem title="Accordion item 3">
    <img
      src="http://placekitten.com/500/200"
      alt="cat"
      style={{
        maxWidth: '100%',
        height: 'auto',
        width: 'auto',
      }}
    />
  </AccordionItem>
</Accordion>

Guidelines

Should be used to help users navigate and digest large blocks of information.
Do not hide important information in the expandable area.

Accessibility

The content of an accordion has to be available for assistive technology. Therefore they require the use of aria-controls and aria-expanded.