Collapsible

When to use

Collapsible hides and shows one section of content: extra details under a summary, a secondary explanation, the rest of a long note. The user opens the detail when they want it; otherwise the page stays short.

When not to use

• For several sections that open and close one under another: Use Accordion.
• To switch between sections at the same level: If only one section shows at a time, use Tabs.
• To start an action: For buttons that do not open a panel, use Button.
• For important information: Do not hide content the user must see.

Anatomy

Show details

LightDark

Copy code

import { Collapsible, CollapsiblePanel, CollapsibleTrigger, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Collapsible>
        <CollapsibleTrigger>Show details</CollapsibleTrigger>
        <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
      </Collapsible>
    </Provider>
  );
}

1. Root (Collapsible): Holds the open state; takes open, defaultOpen, onOpenChange and disabled.
2. Trigger (CollapsibleTrigger): A <button> that carries aria-expanded; the label text.
3. Chevron: A decorative icon after the label; it turns half a turn as the panel opens. chevron={false} removes it.
4. Panel (CollapsiblePanel): The content that opens and closes.

Behaviour

• Click, or Enter and Space, opens and closes the panel.
• On open, the content fades in and drops 4 px; the height changes at once and is never animated (MOT-02). Closing is instant.
• A closed panel carries hidden="until-found" by default: a find in page match in the browser opens it. Pass hiddenUntilFound={false} to turn this off.
• Pass keepMounted to keep state while closed (it applies when hiddenUntilFound is off).
• Use open and onOpenChange to control the open state.

Guidelines

• Make the label say what opens: “Show details” rather than “More”.
• To add space inside the panel, pass a layout class such as className="pt-sm"; the component adds no padding of its own.
• Do not put long, complex content in the panel; consider a separate page instead.
• The label stays the same when open and closed. If you need a different label, control it with open and write the two labels yourself.
• If you need many Collapsibles side by side on a page, use Accordion.

Content

• The label is a short action phrase; no full stop.
• The panel text can be full sentences.

Turkish	English
Ayrıntıları göster	Show details
Gelişmiş seçenekler	Advanced options
Notun devamı	Rest of the note

Related components

• Accordion: Opens and closes several sections one under another.
• Tabs: Switches between sections at the same level.
• Button: Starts an action.