---
title: Expandable
description: Expandable crea un sencillo interruptor mostrar/ocultar para contenido que los lectores pueden querer ver pero que no es esencial para el flujo principal.
---

Usa Expandable para guardar respuestas API detalladas, pasos de solución de problemas o detalles complementarios que de otro modo interrumpirían el flujo de lectura. Se renderiza como una única divulgación clicable — más ligera que Accordion, que está diseñado para secciones agrupadas y navegables.

Usa Expandable cuando:
- **Detalles complementarios** interrumpirían la narrativa principal
- **Información opcional** beneficia a algunos lectores pero no a todos
- **Contenido extenso** (como respuestas API completas) debe estar contraído por defecto

## Uso básico

<Expandable title="Mostrar más detalles">
  Estos detalles están ocultos por defecto y se revelan al hacer clic.
</Expandable>

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

## Abierto por defecto

Comenzar expandido:

<Expandable title="Expandido por defecto" defaultOpen>
  Esta sección comienza visible.
</Expandable>

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

## Casos de uso comunes

### Detalles de respuesta API

Contrae respuestas detalladas que de otro modo interrumpirían el flujo de la documentación:

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

### Pasos de solución de problemas

<Expandable title="¿Tienes problemas de conexión?">
  1. Verifica tu conexión de red
  2. Comprueba que el endpoint de la API sea correcto
  3. Asegúrate de que tu clave de API sea válida
</Expandable>

## Props

<ParamField name="title" type="string" required>
  Texto del encabezado de la sección.
</ParamField>

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

## Expandable vs Accordion

| Característica | Expandable | Accordion |
|----------------|------------|-----------|
| Propósito | Ocultar contenido complementario | Organizar secciones de igual importancia |
| Iconos | No | Sí |
| Descripciones | No | Sí (soporte de subtítulos) |
| Agrupación | Independiente | Se puede agrupar con AccordionGroup |
| Mejor para | Detalles opcionales, ejemplos largos | Preguntas frecuentes, listas de características, navegación |

**Regla general:** Si el contenido es "bueno tener", usa Expandable. Si los usuarios necesitan elegir entre secciones, usa Accordion.

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