---
title: Acordeão
description: Seções recolhíveis que permitem expandir apenas o conteúdo necessário, ideais para perguntas frequentes, listas de recursos e opções de configuração.
---

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

Seções recolhíveis — os leitores veem o título e expandem para ver os detalhes. Aceitam ícones, descrições e agrupamento.

Use Accordions quando:
- **Perguntas frequentes** — os usuários consultam as perguntas e expandem as respostas
- **Listas de recursos** — cada recurso recebe uma seção com detalhes
- **Opções de configuração** — agrupe as configurações por categoria
- **Guias passo a passo** com detalhes expansíveis

## Uso

```mdx
<Accordion title="Advanced Configuration">
  Optional details go here.
</Accordion>
```

## Acordeão básico

<Accordion title="Clique para expandir">
  Este conteúdo fica oculto até que o acordeão seja expandido.

  Você pode incluir qualquer conteúdo aqui: texto, código, imagens ou outros componentes.
</Accordion>

```mdx
<Accordion title="Click to expand">
  This content is hidden until the accordion is expanded.

  You can include any content here: text, code, images, or other components.
</Accordion>
```

## Com descrição

Adicione um subtítulo com a prop `description`:

<Accordion title="Referência da API" description="Endpoints de autenticação">
  A documentação dos endpoints da API de autenticação aparece aqui.
</Accordion>

```mdx
<Accordion title="API Reference" description="Authentication endpoints">
  Documentation for authentication API endpoints goes here.
</Accordion>
```

## Aberto por padrão

Comece expandido com `defaultOpen`:

<Accordion title="Já expandido" defaultOpen>
  Este acordeão começa aberto.
</Accordion>

```mdx
<Accordion title="Already Expanded" defaultOpen>
  This accordion starts in the open state.
</Accordion>
```

## Com ícone

<Accordion title="Configurações" icon="gear">
  Opções de configuração e configurações.
</Accordion>

```mdx
<Accordion title="Settings" icon="gear">
  Configuration options and settings.
</Accordion>
```

## Accordion vs Expandable

| Recurso | Accordion | Expandable |
|---------|-----------|------------|
| Ícones | Sim | Não |
| Descrições | Sim (subtítulo) | Não |
| Agrupamento | AccordionGroup | Independente |
| Peso visual | Mais pesado, semelhante a uma seção | Mais leve, integrado ao conteúdo |
| Mais indicado para | Perguntas frequentes, listas de recursos | Conteúdo complementar |

**Regra prática:** use Accordion quando as seções tiverem a mesma importância e os usuários escolherem entre elas. Use Expandable para detalhes opcionais que não precisam de destaque visual.

## Props

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

<ParamField name="description" type="string">
  Subtítulo exibido abaixo do título.
</ParamField>

<ParamField name="icon" type="string">
  Nome do ícone do Font Awesome (por exemplo, "gear", "settings").
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Variante de estilo do ícone: light, regular ou solid.
</ParamField>

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

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Consulte 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>