# Collapsible

Esconde e mostra um bloco.

E o `Accordion` de um item só, sem a moldura e sem a coordenacao entre irmaos.
Quando ha várias secoes que se fecham entre si, o Accordion diz mais.

```tsx
<Collapsible>
  <CollapsibleTrigger>Dados de quem emite</CollapsibleTrigger>
  <CollapsiblePanel>RivoCode Tecnologia, 12.345.678/0001-99.</CollapsiblePanel>
</Collapsible>
```

O painel anima altura sozinho, e para de animar quando o sistema pede menos
movimento.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Collapsible` - `label` no lugar de `CollapsibleTrigger` e `CollapsiblePanel`; o mesmo movimento do `Accordion`. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Collapsible } from '@rivocode/ui'
```

## Exemplos

### Aberto

```tsx
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@rivocode/ui'

export function Open() {
  return (
    <div className="w-80">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>Dados de quem emite</CollapsibleTrigger>
        <CollapsiblePanel>
          RivoCode Tecnologia, 12.345.678/0001-99, João Pessoa PB.
        </CollapsiblePanel>
      </Collapsible>
    </div>
  )
}
```

### Fechado

```tsx
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@rivocode/ui'

export function ClosedState() {
  return (
    <div className="w-80">
      <Collapsible>
        <CollapsibleTrigger>Dados de quem recebe</CollapsibleTrigger>
        <CollapsiblePanel>Clínica São Lucas, 98.765.432/0001-10.</CollapsiblePanel>
      </Collapsible>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the collapsible panel is initially open. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `onOpenChange` | `((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the panel is opened or closed. |
| `open` | `boolean` |  | 0.4.0 | Whether the collapsible panel is currently open. |
| `render` | `ComponentRenderFn<HTMLProps, CollapsibleRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [DataTable](/componentes/data-table.md)
- [DescriptionList](/componentes/description-list.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)