---
title: Expandable
description: Expandable cria um controle simples para mostrar ou ocultar conteúdo que os leitores podem querer ver, mas que não é essencial ao fluxo principal.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Use Expandable para ocultar respostas detalhadas da API, etapas de solução de problemas ou informações complementares que, de outra forma, interromperiam o fluxo de leitura. Ele é renderizado como uma única caixa de expansão clicável. É mais simples que Accordion, que foi desenvolvido para seções agrupadas e navegáveis.

Use Expandable quando:
- **Detalhes complementares** interromperiam a narrativa principal
- **Informações opcionais** forem úteis para alguns leitores, mas não para todos
- **Conteúdo extenso** (como respostas completas da API) dever ser recolhido por padrão

## Uso básico

<Expandable title="Mostrar mais detalhes">
  Esses detalhes ficam ocultos por padrão e são exibidos quando clicados.
</Expandable>

```mdx
<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>
```

## Aberto por padrão

Comece expandido:

<Expandable title="Expandido por padrão" defaultOpen>
  Esta seção começa visível.
</Expandable>

```mdx
<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>
```

## Casos de uso comuns

### Detalhes da resposta da API

Recolha respostas detalhadas que, de outra forma, interromperiam o fluxo da documentação:

<Expandable title="Ver resposta completa">
```json
{
  "id": "123",
  "name": "Example",
  "metadata": {
    "created": "2024-01-01",
    "updated": "2024-01-15"
  }
}
```
</Expandable>

### Etapas de solução de problemas

<Expandable title="Está com problemas de conexão?">
  1. Verifique sua conexão de rede
  2. Confirme se o endpoint da API está correto
  3. Verifique se sua chave de API é válida
</Expandable>

## Props

<ParamField name="title" type="string" required>
  Texto do cabeçalho da seção.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Inicia expandido.
</ParamField>

## Expandable vs Accordion

| Recurso | Expandable | Accordion |
|---------|------------|-----------|
| Finalidade | Ocultar conteúdo complementar | Organizar seções de igual importância |
| Ícones | Não | Sim |
| Descrições | Não | Sim (suporte a subtítulo) |
| Agrupamento | Independente | Pode ser agrupado com AccordionGroup |
| Ideal para | Detalhes opcionais, exemplos longos | Perguntas frequentes, listas de recursos, navegação |

**Regra geral:** Se o conteúdo for "bom ter", use Expandable. Se os usuários precisarem escolher entre seções, use Accordion.

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Navegue por todos os componentes disponíveis
  </Card>
  <Card title="Noções básicas de MDX" icon="file-code" href="/pt/content/mdx-basics">
    Saiba como usar componentes em MDX
  </Card>
</Columns>