> ## 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

> Compón un activador accesible y un panel animado con expansión controlada o no controlada.

## Resumen

`Collapsible` expone los contratos Root, Trigger y Panel de Base UI. Root gestiona el estado de expansión, Trigger proporciona la activación mediante teclado y la relación con el panel, y Panel gestiona la animación y la duración del contenido.

**Light**

[Ejemplo de Collapsible (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-collapsible--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de Collapsible (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-collapsible--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-collapsible--display)

## "Uso"

```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 = () => (
  <Collapsible.Root defaultOpen style={{ width: 360, maxWidth: '100%' }}>
    <Collapsible.Trigger render={<Button />}>
      Import details
    </Collapsible.Trigger>
    <Collapsible.Panel>
      <Text
        style={{
          paddingTop: 12,
          color: 'var(--t-font-color-secondary)',
          lineHeight: 1.5,
        }}
      >
        Match each CSV column to a record field before importing.
      </Text>
    </Collapsible.Panel>
  </Collapsible.Root>
);
```

Usa `defaultOpen` para la expansión no controlada. Usa `open` y `onOpenChange` cuando la aplicación controla el estado. La devolución de llamada recibe el valor booleano solicitado y los detalles del evento de Base UI, incluidos `reason`, `event` y `cancel()`. Cancelar un cambio conserva el estado actual. Un panel controlado externamente puede omitir Trigger cuando su estado proviene de otro control o de una condición de la aplicación.

Los Trigger heredan el estado `disabled` de Root y pueden anularlo con su propia prop `disabled`. El activador nativo admite Intro y Espacio, y proporciona `aria-expanded` y `aria-controls` automáticamente. Asigna a cada activador un nombre accesible significativo.

## Anatomía

```text theme={null}
Collapsible.Root
├── Collapsible.Trigger
└── Collapsible.Panel
    └── Content
```

## Personalización nativa

Root y Panel representan un `div`; Trigger representa un `button`. Cada parte acepta atributos nativos, controladores, `className`, `style`, refs y composición de Base UI mediante `render`. Las devoluciones de llamada de clase y estilo reciben el estado de la parte. Reenvía todas las props proporcionadas y la ref desde los componentes de renderizado personalizados. Establece `nativeButton={false}` cuando Trigger represente un elemento que no sea un botón.

Los tipos públicos incluyen `CollapsibleRootProps`, `CollapsibleTriggerProps`, `CollapsiblePanelProps`, los tres tipos de estado de las partes, y `CollapsibleRootChangeEventDetails` y `CollapsibleRootChangeEventReason`.

## Animación y ciclo de vida del contenido

Panel usa de forma predeterminada `dimension="height"`. Usa `dimension="width"` para la expansión horizontal y restringe el ancho del contenido cuando sea necesario. `containAnimation` tiene como valor predeterminado `true`, recorta el desbordamiento y distribuye el contenido en una columna. Establécelo en `false` cuando el contenido necesite desbordarse durante la transición.

La `duration` de Panel elige un ajuste preestablecido de tema (`instant`, `fast`, `normal` o `slow`) y el valor predeterminado es `normal`. Las preferencias de movimiento reducido desactivan las transiciones.

Panel se desmonta después de cerrarse de forma predeterminada. Usa `keepMounted` para conservar el estado local del contenido mientras ocultas el panel cerrado. `hiddenUntilFound` permite que la búsqueda de páginas del navegador revele contenido cerrado y tiene prioridad sobre `keepMounted`.

## "Props"

### Collapsible.Root

**Root.className** `string | ((state: CollapsibleRootState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Root.defaultOpen** `boolean` (default: false)

Initial uncontrolled expansion state.

**Root.disabled** `boolean` (default: false)

Default disabled state inherited by the triggers in this root.

**Root.onOpenChange** `((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) =\> void)`

Called with the requested open state and cancelable Base UI event details.

**Root.open** `boolean`

Controlled expansion state. Use defaultOpen for uncontrolled state.

**Root.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsibleRootState\>`

Replaces the root div. Forward the supplied props and ref.

**Root.style** `CSSProperties | ((state: CollapsibleRootState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Collapsible.Trigger

**Trigger.className** `string | ((state: CollapsibleTriggerState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Trigger.disabled** `boolean`

Disables this trigger.

**Trigger.nativeButton** `boolean` (default: true)

Set to false when render replaces the native button with another element.

**Trigger.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsibleTriggerState\>`

Replaces the linked trigger button. Forward the supplied props and ref.

**Trigger.style** `CSSProperties | ((state: CollapsibleTriggerState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

### Collapsible.Panel

**Panel.className** `string | ((state: CollapsiblePanelState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Panel.containAnimation** `boolean` (default: true)

Clips overflowing content during expansion and uses a column layout.

**Panel.dimension** `"height" | "width"` (default: height)

Dimension animated when the panel opens and closes.

**Panel.duration** `"fast" | "instant" | "normal" | "slow"` (default: normal)

Theme timing preset for both size and opacity. Native style can customize transition timing.

**Panel.hiddenUntilFound** `boolean` (default: false)

Uses hidden until-found so browser page search can reveal the contents. Overrides keepMounted.

**Panel.keepMounted** `boolean` (default: false)

Keeps the closed panel mounted and hidden, preserving local content state.

**Panel.render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CollapsiblePanelState\>`

Replaces the animated panel div. Forward the supplied props and ref.

**Panel.style** `CSSProperties | ((state: CollapsiblePanelState) =\> CSSProperties | undefined)`

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.