Accordion

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

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.

Variant

Size

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

Some Informations

Property	Type	Description
`variant`	`default \| card`	The available variants of this component.
`size`	`-`	The available sizes of this component.

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.

Preview

Code

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.

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.

Preview

Code

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.

Preview

Code

Parking Slots

Available parking passes

Costs

Amount in euros

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.

Preview

Code

Name

You have expanded: personal

Props

Accordion

allowsMultipleExpanded?

boolean;

Whether multiple items can be expanded at the same time.

children?

ReactNode |
  ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode }) =>
    ReactNode);

The children of the component. A function may be provided to alter the children based on component state.

className?

string |
  ((values: DisclosureGroupRenderProps & { defaultClassName: string }) => string);

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultExpandedKeys?

Iterable<Key>;

The initial expanded keys in the group (uncontrolled).

disabled?

boolean;

Whether all items are disabled.

expandedKeys?

Iterable<Key>;

The currently expanded keys in the group (controlled).

id?

string;

The element's unique identifier. See MDN.

onExpandedChange?

(keys: Set<Key>) => any;

Handler that is called when items are expanded or collapsed.

Accordion.Item

children?

ReactNode |
  ((values: DisclosureRenderProps & { defaultChildren: ReactNode }) => ReactNode);

The children of the component. A function may be provided to alter the children based on component state.

className?

string | ((values: DisclosureRenderProps & { defaultClassName: string }) => string);

The CSS className for the element. A function may be provided to compute the class based on component state.

defaultExpanded?

boolean;

Whether the disclosure is expanded by default (uncontrolled).

disabled?

boolean;

Whether the item is disabled.

expanded?

boolean;

Whether the item is expanded (controlled).

id?

Key;

An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys.

onExpandedChange?

(isExpanded: boolean) => void;

Handler that is called when the disclosure's expanded state changes.

slot?

string | null;

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

Last update: 2 months ago

Accordion

Informations

Personal Settings

Billing Adress

Is here a large amount of text?

What is your return policy?

How do I track my order?

Personal Information

Billing Details

Parking passes

Handicapped parking spaces

Settings

Personal Information

Billing Details