Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
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.

FigmaGitHub

Code examples

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

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

Guidelines

Accordions, expandables, expandable elements - a beloved concept with many names. They are meant to be employed when there's a need to conceal information or graphic elements. This can be done to maintain a tidy design, simplify navigation, or establish a clear hierarchy for the flow of information.

Title

  • The title should be descriptive in regards to the content.
  • Avoid using other interactive components (such as links or buttons) in the accordion trigger.

Content

  • The content should not be crucial for the user to understand the entirety of the information on the page
  • Avoid using Accordions inside of other accordions (nested lists)

Icons

You can add icons using the startElement prop. All icons should be the outline version, and always 24px. startElement is supported for both Expandable and ExpandableItem.

Code

<Expandable />

import { Expandable } from "@vygruppen/spor-react";

Useful for when you only have a single item to show or hide

Props

Name
Type
Required?
Description
collapsiblebooleanAllow the user to close open panels without opening another one.
disabledboolean
headingLevelstring"h2" | "h3" | "h4" | "h5" | "h6". Defaults to "h3"
lazyMountbooleanWhether to enable lazy mounting
onFocusChange(details: FocusChangeDetails) => voidThe callback fired when the focused accordion item changes.
onValueChange(details: ValueChangeDetails) => voidThe callback fired when the state of expanded/collapsed accordion items changes.
startElementReact.ReactNodeOptional icon shown to the left. Use outline icons – 24px
unmountOnExitbooleanWhether to unmount on exit.
valuestring[]The `value` of the accordion items that are currently being expanded.
variant"core" | "ghost" | "floating"Default "ghost"

<ExpandableItem />

import { ExpandableItem } from "@vygruppen/spor-react";

One of multiple items inside of an Accordion

Props

Name
Type
Required?
Description
defaultOpenboolean
headingLevel"h2" | "h3" | "h4" | "h5" | "h6"The DOM element rendered for the title
startElementReact.ReactNodeOptional icon shown to the left. Use outline icons – 24px
titleReact.ReactNodeThe title of the expandable item
valuestringThe value of the AccordionItem

<Accordion />

import { Accordion } from "@vygruppen/spor-react";

Useful for when you only have a single item to show or hide

Props

Name
Type
Required?
Description
collapsiblebooleanAllow the user to close open panels without opening another one.
disabledboolean
lazyMountbooleanWhether to enable lazy mounting
onFocusChange(details: FocusChangeDetails) => voidThe callback fired when the focused accordion item changes.
onValueChange(details: ValueChangeDetails) => voidThe callback fired when the state of expanded/collapsed accordion items changes.
unmountOnExitbooleanWhether to unmount on exit.
valuestring[]The `value` of the accordion items that are currently being expanded.
variant"core" | "ghost" | "floating"Default "ghost"

<AccordionItem />

import { AccordionItem } from "@vygruppen/spor-react";

Props

Name
Type
Required?
Description
childrenReact.ReactNode
defaultOpenboolean
disabledboolean
valuestringThe value of the accordion item.

<AccordionItemTrigger />

import { AccordionItemTrigger } from "@vygruppen/spor-react";

The interactive elements that toggles the accordion content

Props

Name
Type
Required?
Description
childrenReact.ReactNodeThe title of the accordion item
headingLevelstring"h2" | "h3" | "h4" | "h5" | "h6". Defaults to "h3"
startElementReact.ReactNodeOptional icon shown to the left. Use outline icons – 24px

<AccordionContent />

import { AccordionContent } from "@vygruppen/spor-react";

The panel that is shown or hidden

Props

Name
Type
Required?
Description
childrenReact.ReactNode