Accordion

When to use

Accordion splits long content under headers so the user opens only the part they need: frequently asked questions, groups of settings, sections of a long form. All headers are always visible; the content opens on demand.

When not to use

• To open and close a single section: Use Collapsible for one standalone disclosure.
• To switch between peer views of the same context: Use Tabs when the user looks at one panel at a time.
• When the user must read all of the content: Show it in plain sequence; hiding it makes reading harder.
• To separate sections visually only: Use Separator.

Anatomy

First heading

Section content goes here.

Second heading

Third heading

LightDark

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Accordion defaultValue={["first"]}>
        <AccordionItem value="first" title="First heading">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading">Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}

1. Root (Accordion): Wraps the items; open state, variant, size and headingLevel come from here.
2. Header button (the AccordionItem header): A button inside an <hN> heading; carries the title, an optional icon and a description.
3. Chevron: Turns half a turn when the item opens; decorative.
4. Panel: The content of an open item; linked to its header as a region.

Behaviour

• Click, Enter or Space opens or closes the item. By default opening one item closes the other; with multiple each works on its own.
• When opening, the content fades in over 150 ms and drops 4 px. The height changes at once and is never animated. Closing is instant.
• Closed panels can be found with the browser’s find in page; a match opens its item. Pass hiddenUntilFound={false} to turn this off.
• State is uncontrolled with defaultValue and controlled with value and onValueChange; both take an array of values.

Guidelines

• Keep headers short and distinct; the user should be able to guess the content from the headers alone.
• Follow the page’s heading order: set headingLevel one level below the heading above the accordion.
• Use line for page content and contained for separate card-like boxes.
• Avoid long, interactive structures inside a panel; the user should not get lost.
• Explain near the item why it is disabled; otherwise do not show it.

Content

• Headers are noun phrases or a short question; do not end them with a full stop.
• A description is one short sentence and does not repeat the title.

Turkish	English
Birinci başlık	First heading
Kısa açıklama metni	Short description text
Bölüm içeriği burada yer alır.	Section content goes here.

Related components

• Collapsible: Opens and closes a single section.
• Tabs: Switches between panels of the same context.
• Separator: Divides sections with a line.