Components

Collapsible

Shows and hides one section of content.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Collapsible } from '@bigbang/ui';
Source: Collapsible.tsx
Storybook: Collapsible · Playground

Collapsible has three parts, all in the @bigbang/ui package: Collapsible, CollapsibleTrigger, CollapsiblePanel.

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

<Collapsible>
  <CollapsibleTrigger>Show details</CollapsibleTrigger>
  <CollapsiblePanel className="pt-sm">Extra details go here.</CollapsiblePanel>
</Collapsible>;

Props

Collapsible

open

Description: Whether the panel is open when you control it. Use it with onOpenChange.
Type: boolean

defaultOpen

Description: Whether the panel is open on first render when you do not control it.
Type: boolean
Default: false

onOpenChange

Description: Called with the new open state when the user opens or closes the panel.
Type: (open: boolean) => void

disabled

Description: Turns off the trigger.
Type: boolean
Default: false

className

Description: For layout only: margins and placement.
Type: string

childrenRequired

Description: A CollapsibleTrigger and a CollapsiblePanel, in that order.
Type: ReactNode

CollapsibleTrigger

childrenRequired

Description: Visible label that says what opens, such as "Ayrıntıları göster".
Type: ReactNode

chevron

Description: Shows a chevron after the label that turns half a turn when the panel opens.
Type: boolean
Default: true

className

Description: For layout only.
Type: string

CollapsiblePanel

hiddenUntilFound

Description: Keeps closed content findable with the browser's find in page (hidden="until-found"); a match opens the panel.
Type: boolean
Default: true

keepMounted

Description: Keeps the closed panel in the DOM so its state survives. Ignored while hiddenUntilFound is on.
Type: boolean
Default: false

className

Description: For layout only.
Type: string

childrenRequired

Description: Content shown while open.
Type: ReactNode

Data attributes

data-component: collapsible, collapsible-trigger, collapsible-panel.
data-open is present on the root, the trigger and the panel while open (Base UI).
data-disabled is present on the root and the trigger when disabled (Base UI).