> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Collapsible
> Compose an accessible trigger and animated panel with controlled or uncontrolled expansion.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`Collapsible` exposes Base UI's Root, Trigger, and Panel contracts. Root owns expansion state, Trigger supplies keyboard activation and the panel relationship, and Panel owns animation and content lifetime.
## Usage
```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Collapsible } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';
export const ImportDetails = () => (
}>
Import details
Match each CSV column to a record field before importing.
);
```
Use `defaultOpen` for uncontrolled expansion. Use `open` and `onOpenChange` when the application owns the state. The callback receives the requested boolean and Base UI event details, including `reason`, `event`, and `cancel()`. Canceling a change preserves the current state. An externally controlled panel can omit Trigger when its state comes from another control or application condition.
Triggers inherit Root's `disabled` state and can override it with their own `disabled` prop. The native trigger supports Enter and Space and supplies `aria-expanded` and `aria-controls` automatically. Give each trigger a meaningful accessible name.
## Anatomy
```text theme={null}
Collapsible.Root
├── Collapsible.Trigger
└── Collapsible.Panel
└── Content
```
## Native customization
Root and Panel render a `div`; Trigger renders a `button`. Each part accepts native attributes, handlers, `className`, `style`, refs, and Base UI `render` composition. Class and style callbacks receive the part's state. Forward all supplied props and the ref from custom render components. Set `nativeButton={false}` when Trigger renders a non-button element.
Public types include `CollapsibleRootProps`, `CollapsibleTriggerProps`, `CollapsiblePanelProps`, the three part state types, and `CollapsibleRootChangeEventDetails` and `CollapsibleRootChangeEventReason`.
## Animation and content lifetime
Panel defaults to `dimension="height"`. Use `dimension="width"` for horizontal expansion and constrain the content's width when needed. `containAnimation` defaults to `true`, clips overflow, and lays content out in a column. Set it to `false` when content needs to overflow during the transition.
Panel's `duration` chooses a theme preset (`instant`, `fast`, `normal`, or `slow`). For independent timings, use native `style={{ transitionDuration: '0.4s, 0.2s' }}`. The first duration controls size and the second controls opacity. Reduced-motion preferences disable the transitions, including custom timings.
Panel unmounts after closing by default. Use `keepMounted` to preserve local content state while hiding the closed panel. `hiddenUntilFound` lets browser page search reveal closed content and takes precedence over `keepMounted`.
## Props
### Collapsible.Root
CSS class applied to the element, or a function that
returns a class based on the component's state.
Initial uncontrolled expansion state.
Default disabled state inherited by the triggers in this root.
Called with the requested open state and cancelable Base UI event details.
Controlled expansion state. Use defaultOpen for uncontrolled state.
Replaces the root div. Forward the supplied props and ref.
Style applied to the element, or a function that
returns a style object based on the component's state.
### Collapsible.Trigger
CSS class applied to the element, or a function that
returns a class based on the component's state.
Disables this trigger.
Set to false when render replaces the native button with another element.
Replaces the linked trigger button. Forward the supplied props and ref.
Style applied to the element, or a function that
returns a style object based on the component's state.
### Collapsible.Panel
CSS class applied to the element, or a function that
returns a class based on the component's state.
Clips overflowing content during expansion and uses a column layout.
Dimension animated when the panel opens and closes.
Theme timing preset for both size and opacity. Native style can customize transition timing.
Uses hidden until-found so browser page search can reveal the contents. Overrides keepMounted.
Keeps the closed panel mounted and hidden, preserving local content state.
Replaces the animated panel div. Forward the supplied props and ref.
Style applied to the element, or a function that
returns a style object based on the component's state.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.