Analytics

We measure which pages get used so we can improve the documentation. No cookies, no cross-site tracking. See our privacy notice.

Marigold
v18.1.0
Marigold
v18.1.0

Application

MarigoldProvider
RouterProvider

Layout

AppShellbeta
Aside
Aspect
Center
Columns
Container
Grid
Inline
Inset
OverflowRegionbeta
Pagebeta
Panelbeta
Scrollable
Split
Stack
Tiles

Actions

Buttonupdated
ButtonGroupbeta
Link
LinkButton
ToggleButtonbeta

Form

Autocomplete
Calendar
Checkbox
ComboBox
DateField
DatePicker
DateRangePickerbeta
FileField
Form
NumberField
Radio
RangeCalendaralpha
SearchField
SegmentedControlbeta
Select
SelectListupdated
Slider
Switchupdated
TagFieldbeta
TextArea
TextField
TimeField

Collection

Cardupdated
Table
ListViewbeta
Tag
ActionBaralpha

Navigation

Accordion
Breadcrumbs
Pagination
Sidebarbeta
Tabs
TopNavigationbeta

Overlay

ActionMenualpha
ContextualHelp
Dialog
Drawer
Menuupdated
Toastbeta
Tooltip

Content

Badge
Descriptionalpha
Divider
EmptyState
ErrorStatebeta
Headline
Keyboardbeta
List
Loader
SectionMessage
SVG
Text
TextValuealpha
Titlealpha

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncList
useLandmark
useListData
useTheme
VisuallyHidden
Components

Accordion

Component to show and hide related content from the main page.

An <Accordion> is a component that allows you to organizing content into collapsible sections. Accordions are commonly used in website and application designs to present information in a compact and organized way, allowing users to focus on the specific information they are interested in without being overwhelmed by excessive content.

Anatomy

HeaderContentItem
  • Header: The pressable row that expands or collapses the item.
  • Content: The area that is revealed when the item is expanded.
  • Item: A single collapsible section of the accordion.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

The selected theme does not has any options for"size".

Some Informations

two

Some more Informations
PropertyTypeDescription
variantdefault | cardThe available variants of this component.
size-The available sizes of this component.

The Accordion component offers different visual styles to match how content sections relate to the surrounding layout.

VariantDescriptionWhen to use
defaultFlat layout with bottom borders separating items. This is the default variant.Inline content sections on a page, like FAQ lists or settings panels.
cardEach item appears as a raised, separated card with spacing between items.When accordion items need visual distinction from the page background, or when sections represent independent content blocks.

Usage

An <Accordion> is a UI component that allows users to expand and collapse sections of content. It helps in organizing information efficiently, improving navigation, and reducing visual clutter. Common use cases include FAQs, structured data presentation, and collapsible navigation menus.

While accordions are a great tool for managing content, they are not always the best solution. In cases where users need frequent access to key information, hiding it behind an interaction can create unnecessary friction. Similarly, for long or complex content, expanding a section may lead to overwhelming amounts of text rather than improving readability. Navigation menus with only a few items may not benefit from collapsible sections, as this adds clicks rather than streamlining access. Finally, for processes requiring users to follow a specific sequence, a step-by-step layout is often more effective than collapsible sections.

Content Organization

Accordions help structure content by breaking it into collapsible sections, making navigation easier while preventing cognitive overload. They are particularly useful when dealing with large amounts of information that do not need to be viewed all at once.

This is a large amount of text. When we say "large amount," we mean a substantial, considerable, and voluminous quantity of words, sentences, and paragraphs that stretch on in a way that one might describe as lengthy, extensive, or even exhaustive. This text will meander through ideas, concepts, and descriptions, filling space with a sheer abundance of verbiage meant to illustrate just how much text can be included in a single response. To begin, let's explore the nature of large texts. What makes a text large? Is it simply the number of words, or is there an element of density that contributes to its perceived length? A novel, for instance, is often regarded as long, but the complexity of its content can make it feel either longer or shorter depending on the reader's engagement. A technical manual, despite having fewer words than a novel, might seem insurmountably long due to the complexity of the information it conveys. If we consider word count alone, we might look at examples such as epic poems—Homer's Iliad and Odyssey, Dante's Inferno, or Paradise Lost by John Milton—each containing thousands of lines of intricate poetry. In contrast, modern novels like War and Peace by Leo Tolstoy, Les Misérables by Victor Hugo, or Infinite Jest by David Foster Wallace are all known for their massive word counts, often surpassing several hundred thousand words. Beyond literature, let's think about other forms of text that can be considered large. Scientific research papers, encyclopedic entries, legal documents, and government regulations all contribute to the vast sea of extensive writings that exist in the world. Consider the IRS tax code, a document so long and convoluted that even experts struggle to fully comprehend it. Or Wikipedia, a massive and continuously expanding online encyclopedia with millions of articles covering every conceivable topic. Another interesting example of lengthy texts is programming documentation. Developers and engineers often rely on massive collections of text to understand how software and programming languages function. The Python documentation, for example, spans thousands of pages when printed, detailing every function, method, and library available to users. Similarly, legal contracts, privacy policies, and terms of service agreements are infamous for their verbosity, often discouraging readers from fully engaging with them due to their overwhelming size. Returning to literature, serialization is another method that produces large texts over time. Charles Dickens, for instance, published many of his novels in serialized form, gradually compiling them into lengthy books. Modern web novels and fan fiction follow a similar trend, with some stories reaching millions of words as authors continuously add new chapters over time. History, too, is filled with examples of large texts. Ancient religious scriptures such as the Bible, the Quran, and the Mahabharata are all extensive, spanning numerous books, chapters, and verses. Historians and scholars have devoted lifetimes to studying these works, analyzing their meaning, historical context, and impact on civilizations. The digital age has only increased the prevalence of large texts. Social media, despite favoring short-form content, has led to the proliferation of long threads, deep-dive articles, and detailed blog posts. Online forums such as Reddit contain countless lengthy discussions, debates, and personal stories, often surpassing the length of traditional written works. The rise of self-publishing has further contributed to an explosion of large texts, as authors no longer need to adhere to the constraints imposed by traditional publishers. Even in everyday life, we encounter large amounts of text more often than we realize. Think about the fine print on contracts, instruction manuals for household appliances, and the endless documentation required for bureaucratic processes. We are surrounded by vast quantities of written information, whether we engage with it fully or merely skim its surface. To conclude, a large amount of text is more than just a high word count—it's a reflection of complexity, density, and the human need to document, explain, and communicate. From literature to legal documents, from programming guides to social media discussions, the world is full of extensive writings that serve countless purposes. And with that, this response itself has become a testament to the sheer possibility of generating a large amount of text, filling space with words, phrases, and ideas that continue to flow as long as there is something to say.

We offer a 30-day return policy with a full refund.

You can track your order through our tracking portal.

Using Forms

For complex forms, accordions can group related fields into sections, reducing visual clutter and making the completion process more intuitive. This is particularly beneficial for multi-step or conditional forms where not all fields need to be shown at once.

Multiple expanded

With the multiple expanded mode, you can collapse and hide items as needed while keeping several sections open at the same time. You can also set one or more defaultExpandedKeys. Use a multiple expanded accordion when users need to view several sections simultaneously, such as comparing information or accessing related FAQs. It works best when the content is concise and users benefit from having multiple sections open at once without losing context.

Available parking passes
Amount in euros

Available parking passes
Amount in euros

Available parking stations

Controlled Accordion

A controlled Accordion can be expanded and collapsed using expandedKeys and onExpandedChange. The expandedKeys must match the id on the Accordion.Item component(s) that you wish to expand.

You have expanded: personal

Long-form content

For Accordions with a lot of content, enable stickyHeader so the header keeps giving context while you scroll. The header stays pinned to the top of the nearest scroll container (the page or a scrollable ancestor) while the item content scrolls underneath it.

The stickyHeader applies to the entire Accordion: <Accordion stickyHeader>...</Accordion>.

When a header needs actions such as buttons, pass them to the actions prop of Accordion.Header rather than wrapping the header in a layout component. That keeps the actions inside the sticky header so they stay pinned together with the title.

Scroll inside this box: the header stays pinned to the top while the text below moves underneath it.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Scroll inside this box: the header stays pinned to the top while the text below moves underneath it.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Icon position

The icon or chevron in the Header of the Accordion can be positioned right and left. Especially when you use action in the header the position should be on the left side. The icon position also applied to the whole Accordion: <Accordion iconPosition={'left'}>...</Accordion>.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View Accordion stories

Accordion

Prop

Type

DOM event handlers (64)

Prop

Type

Accordion.Item

Prop

Type

DOM event handlers (64)

Prop

Type

Accordion.Header

Prop

Type

Last update: 8 minutes ago

ActionBar

Floating toolbar of bulk actions for the current selection in a collection

Breadcrumbs

A component for displaying hierarchical navigation with separators.

© Reservix GmbH — Marigold Design System
ImpressumDatenschutzGitHubRSS

On this page

AnatomyAppearanceUsageContent OrganizationUsing FormsMultiple expandedControlled AccordionLong-form contentIcon positionPropsAccordionAccordion.ItemAccordion.Header