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

# Riducibile

> Crea un trigger accessibile e un pannello animato con espansione controllata o non controllata.

## Panoramica

`Collapsible` espone i contratti Root, Trigger e Panel di Base UI. Root gestisce lo stato di espansione, Trigger fornisce l'attivazione da tastiera e la relazione con il pannello, e Panel gestisce l'animazione e il ciclo di vita del contenuto.

**Light**

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

**Dark**

[Esempio di elemento riducibile (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)

## Utilizzo

```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` per l'espansione non controllata. Usa `open` e `onOpenChange` quando l'applicazione gestisce lo stato. Il callback riceve il valore booleano richiesto e i dettagli dell'evento Base UI, inclusi `reason`, `event` e `cancel()`. L'annullamento di una modifica preserva lo stato corrente. Un pannello controllato esternamente può omettere Trigger quando il suo stato deriva da un altro controllo o da una condizione dell'applicazione.

I trigger ereditano lo stato `disabled` di Root e possono sovrascriverlo con la propria prop `disabled`. Il trigger nativo supporta Invio e Spazio e fornisce automaticamente `aria-expanded` e `aria-controls`. Assegna a ogni trigger un nome accessibile significativo.

## Anatomia

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

## Personalizzazione nativa

Root e Panel eseguono il rendering di un `div`; Trigger esegue il rendering di un `button`. Ogni parte accetta attributi nativi, gestori, `className`, `style`, ref e la composizione `render` di Base UI. I callback di classe e stile ricevono lo stato della parte. Inoltra tutte le prop fornite e il ref dai componenti di rendering personalizzati. Imposta `nativeButton={false}` quando Trigger esegue il rendering di un elemento non button.

I tipi pubblici includono `CollapsibleRootProps`, `CollapsibleTriggerProps`, `CollapsiblePanelProps`, i tre tipi di stato delle parti e `CollapsibleRootChangeEventDetails` e `CollapsibleRootChangeEventReason`.

## Animazione e ciclo di vita del contenuto

Panel usa per impostazione predefinita `dimension="height"`. Usa `dimension="width"` per l'espansione orizzontale e limita la larghezza del contenuto quando necessario. `containAnimation` è impostato su `true` per impostazione predefinita, ritaglia l'overflow e dispone il contenuto in una colonna. Impostalo su `false` quando il contenuto deve fuoriuscire durante la transizione.

`duration` di Panel sceglie una preimpostazione del tema (`instant`, `fast`, `normal` o `slow`) e il valore predefinito è `normal`. Le preferenze per la riduzione del movimento disabilitano le transizioni.

Per impostazione predefinita, Panel viene smontato dopo la chiusura. Usa `keepMounted` per preservare lo stato locale del contenuto nascondendo il pannello chiuso. `hiddenUntilFound` consente alla ricerca nella pagina del browser di mostrare il contenuto chiuso e ha la precedenza su `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.