Components

Accordion

Accordions are user-friendly interface elements that allow for the expansion or collapse of one or more sections, enabling users to reveal or hide information as needed.

Examples

Example of a simple accordion

<Expandable title="Read more about the summer disruption">
  <Text>
    The summer disruption is when BaneNOR closes significant portions of the railway network during periods throughout the summer to carry out necessary improvements.
  </Text>
</Expandable>

Example of an accordion with multiple items

<Accordion>
  <Stack>
    <ExpandableItem title="When to use accordions?">
      <Text>
        Use accordions when you have multiple fields that should be related, and
        you only want to display one at a time.
      </Text>
    </ExpandableItem>
    <ExpandableItem title="When to use accordions?">
      <Text>
        Use Expandable when you want only one expandable 
        block that stands alone.
      </Text>
    </ExpandableItem>
  </Stack>
</Accordion>

An accordion where several items can be open at the same time

<Accordion allowMultiple>
  <Stack spacing={2}>
    <ExpandableItem title="Here is a panel">
      Hi from the first panel! 👋
    </ExpandableItem>
    <ExpandableItem title="Here is another panel">
      The other panel is waving back. 👋
    </ExpandableItem>
  </Stack>
</Accordion>

An accordion where one can close an open item

<Expandable 
  title="A panel that can be opened and closed"
  allowToggle
>
  Now you can also close me!
</Expandable>

Different variants

<Stack spacing={2}>
  <Expandable variant="ghost" title="This is a ghost-variant">
    The ghost variant is often used for menus, lists, or individual elements that
    need to expand.
  </Expandable>
  <Expandable variant="base" title="This is the base-variant">
    The base variant is quite similar to the ghost variant but can also be
    used alongside other graphic elements.
  </Expandable>
  <Expandable variant="floating" title="This is the floating-variant">
    The floating variant is the most flexible option and should be used in more
    advanced scenarios.
  </Expandable>
</Stack>

Accordions with icons on the left

<Expandable 
  title="Read more about the summer disruption"
  leftIcon={<InformationOutline24Icon />}
>
  <Text>
    The summer disruption is when BaneNOR closes significant portions of the
    railway network during periods throughout the summer to carry out necessary
    improvements.
  </Text>
</Expandable>

A more customized example

<Accordion allowToggle>
  <AccordionItem>
    <AccordionPanel>Woah, upside down!</AccordionPanel>
    <AccordionButton>
      Here is a title <AccordionIcon />
    </AccordionButton>
  </AccordionItem>
</Accordion>