Accordion

Agrupa secciones relacionadas de contenido que se pueden abrir y cerrar para administrar la densidad de información.

Descripción general

Los acordeones disminuyen la carga cognitiva al permitir que las personas elijan qué secciones de contenido desean ver, similar a las preguntas en una sección de preguntas frecuentes.

Nunca pongas información requerida para la tarea actual dentro de un acordeón. Considera un tratamiento que le dé más prominencia.

Cuándo usar

✓ Usa acordeones cuando

  • Necesitas organizar contenido extenso en secciones escaneables
  • El usuario no necesita ver toda la información al mismo tiempo
  • Quieres reducir el desplazamiento vertical en la página
  • Tienes secciones de preguntas frecuentes o ayuda contextual

✗ Evita acordeones cuando

  • El contenido es breve y cabe cómodamente en la vista
  • La información de una sección depende de otra sección
  • El usuario necesita comparar información entre secciones
  • El contenido es crítico para completar una tarea

Comportamiento

Cerrado por defecto

Por defecto, los elementos del acordeón están cerrados. Usa collapsible para que un panel abierto pueda cerrarse con otro click en su encabezado.

Múltiples elementos abiertos

Sin multiple, abrir un panel cierra cualquier otro panel abierto. Con multiple, varios paneles pueden permanecer abiertos al mismo tiempo.

Ejemplos

Default

Un acordeón simple donde cada panel se puede abrir o cerrar.

Expanded

Panel abierto por defecto usando defaultOpenItems.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Multiple

Permite que múltiples paneles estén abiertos simultáneamente.

Small

Contenido más compacto con menos texto.

Accesibilidad

Los encabezados del acordeón tienen un rol de botón que los hace perceptibles para las tecnologías de asistencia. Cuando un elemento del acordeón está abierto, sus propiedades aria-expanded y active deben establecerse en true.

Navegación por teclado

  • Tab/Shift+Tab: Navega entre los encabezados del acordeón
  • Enter/Space: Expande o colapsa el panel actual
  • Flecha Arriba/Abajo: Mueve el foco entre encabezados
  • Home/End: Mueve el foco al primer/último encabezado