---
title: Accordion
description: "Secciones de contenido contraíbles para que los usuarios expandan solo lo que necesitan. Ideal para FAQs, listas de funciones y opciones de configuración."
---

Secciones contraíbles -- los lectores ven el encabezado y expanden para ver los detalles. Admite iconos, descripciones y agrupación.

Usa Accordions cuando:
- **Preguntas frecuentes** - Los usuarios escanean las preguntas y expanden las respuestas
- **Listas de características** - Cada característica tiene una sección con detalles
- **Opciones de configuración** - Agrupa la configuración por categoría
- **Guías paso a paso** con detalles expandibles

## Uso

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

## Accordion básico

<Accordion title="Haz clic para expandir">
  Este contenido está oculto hasta que se expande el accordion.

  Puedes incluir cualquier contenido aquí: texto, código, imágenes u otros 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>
```

## Con descripción

Agrega un subtítulo con la prop `description`:

<Accordion title="Referencia de la API" description="Endpoints de autenticación">
  Aquí va la documentación para los endpoints de autenticación de la API.
</Accordion>

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

## Abierto por defecto

Comienza expandido con `defaultOpen`:

<Accordion title="Ya expandido" defaultOpen>
  Este accordion comienza en estado abierto.
</Accordion>

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

## Con icono

<Accordion title="Configuración" icon="gear">
  Opciones de configuración y ajustes.
</Accordion>

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

## Accordion vs Expandable

| Característica | Accordion | Expandable |
|----------------|-----------|------------|
| Iconos | Sí | No |
| Descripciones | Sí (subtítulo) | No |
| Agrupación | AccordionGroup | Independiente |
| Peso visual | Mayor, tipo sección | Menor, en línea |
| Ideal para | Preguntas frecuentes, listas de características | Contenido complementario |

**Regla general:** Usa Accordion cuando las secciones son igualmente importantes y los usuarios eligen entre ellas. Usa Expandable para detalles "que está bien tener" que no necesitan prominencia visual.

## Props

<ParamField name="title" type="string" required>
  Texto del encabezado del accordion.
</ParamField>

<ParamField name="description" type="string">
  Subtítulo que se muestra debajo del título.
</ParamField>

<ParamField name="icon" type="string">
  Nombre del icono de Font Awesome (p. ej., "gear", "settings").
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Variante de estilo del icono: light, regular o solid.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Comienza en estado expandido.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>