Skip to content
Vy logo
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

When a single accordion should stand alone, use the Expandable-component. 

<Expandable title="Read more about expandable">
  <Text>
Expandables should only be used if you want to show a single accordion item alone. 
  </Text>
</Expandable>

Pass the collapsible-prop to allow the single accordion to be closed and opened. 

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

If the accordion should contain several items, use the Accordion-component to wrap a list of ExpandalbeItem’s . 

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

Use the “multiple" prop to allow several items to be open at the same time

<Accordion multiple>
  <ExpandableItem title="Here is a panel" value="a">
    Hi from the first panel! 👋
  </ExpandableItem>
  <ExpandableItem title="Here is another panel" value="b">
    The other panel is waving back. 👋
  </ExpandableItem>
</Accordion>

Different variants

<Stack gap={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="core" title="This is the core-variant">
    The core 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>
  <Expandable variant="underlined" title="This is the underlined-variant">
    The underlined variant display with a thin line at the bottom.
  </Expandable>
</Stack>

Accordions with icons on the left

<Expandable 
  title="Read more about the summer disruption"
  startElement={<InformationOutline24Icon />}
  collapsible
>
  <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>

To create more customised accordions, use the AccordionItem-component together with AccordionItemContent and AccordionItemTrigger to build the accordion as you want.

<Accordion collapsible>
  <AccordionItem value="Woah, upside down!">
    <AccordionItemContent>Woah, upside down!</AccordionItemContent>
    <AccordionItemTrigger>
      Here is a title
    </AccordionItemTrigger>
  </AccordionItem>
</Accordion>