Skip to content
Vy logo
  • 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
variant"core" | "ghost" | "floating"Default "ghost"
collapsiblebooleanAllow the user to close open panels without opening another one.
lazyMountbooleanWhether to enable lazy mounting
unmountOnExitbooleanWhether to unmount on exit.
disabledboolean
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.
valuestring[]The `value` of the accordion items that are currently being expanded.
startElementReact.ReactNodeOptional icon shown to the left. Use outline icons – 24px
headingLevelstring"h2" | "h3" | "h4" | "h5" | "h6". Defaults to "h3"

<ExpandableItem />

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

One of multiple items inside of an Accordion

Props

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

<Collapsible />

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

OBS! These are the props that can be used for Collapsible.Root, which wraps Collapsible.Content and Collapsible.Trigger

Props

Name
Type
Required?
Description
disabledbooleanDefault false. Whether the collapsible is disabled
defaultOpenbooleanDefault false. The initial open state of the collapsible when rendered.
collapsedHeightstring | numberThe height of the content while collapsed.
collapsedWidthstring | numberThe width of the content while collapsed
onOpenChange(details: OpenChangeDetails) => voidThe callback invoked when the open state changes.
openbooleanThe controlled open state of the collapsible.

<AccordionItem />

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

Props

Name
Type
Required?
Description
disabledboolean
childrenReact.ReactNode
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
startElementReact.ReactNodeOptional icon shown to the left. Use outline icons – 24px
headingLevelstring"h2" | "h3" | "h4" | "h5" | "h6". Defaults to "h3"

<AccordionContent />

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

The panel that is shown or hidden

Props

Name
Type
Required?
Description
childrenReact.ReactNode