Accordion
Permite condensar contenido de estructura similar en secciones colapsables, revelando el detalle de una a la vez.
- Condensar contenido de estructura similar: mostrar varias secciones equivalentes ocultas por defecto, dejando visible solo el título. Ej.: preguntas frecuentes, métodos de envío disponibles.
- Ahorrar espacio en pantallas con mucha información: revelar el detalle de una sección solo cuando la persona lo necesita, en lugar de mostrar todo el contenido a la vez. Ej.: reglas de impuestos agrupadas por categoría de producto.
- Guiar la atención a una sola sección a la vez: cuando el diseño necesita que, al abrir un ítem, el anterior se cierre automáticamente, ya que ese es el comportamiento por defecto del componente.
- Mostrar varias secciones abiertas en simultáneo: dentro de un mismo grupo, Accordion solo permite un ítem abierto a la vez. Si la persona necesita comparar el contenido de más de una sección al mismo tiempo, usar Tabs o mostrar el contenido directamente, sin ocultarlo.
- Alternar entre vistas de un mismo contenido: si el objetivo es cambiar la forma de ver la misma información, no revelar contenido adicional, usar SegmentedControl o Tabs.
- Navegar a otra pantalla: el título de un ítem no reemplaza una navegación. Si cada "sección" en realidad lleva a una pantalla distinta, usar List con Link en lugar de simular contenido que no está ahí.
- Header (componente Accordion.Header): fila que dispara la apertura y el cierre del ítem al hacer click.
- Icon (opcional): elemento ubicado antes del título, que refuerza el contenido de la sección.
- Title: texto principal del encabezado.
- Subtitle (opcional): texto secundario, debajo del título, que anticipa de qué trata la sección.
- Toggle icon (opcional): ícono que indica si el ítem está cerrado o abierto; se oculta con noIconToggle.
- Body (componente Accordion.Body): contenedor del contenido que se revela al abrir el ítem.
Ícono de alternancia (default): el chevron indica si el ítem está cerrado o abierto. Es el comportamiento recomendado para la mayoría de los casos. Ej.: una lista de preguntas frecuentes.
Tarjeta de crédito
Indicador personalizado (noIconToggle): oculta el chevron para reemplazarlo por otro control, como un Radio. Conviene cuando el ítem representa una opción dentro de una selección, no solo contenido para revelar. Ej.: elegir un método de pago entre varias opciones.
Interactivo (default): el header responde al click y muestra el ícono de alternancia. Es el comportamiento esperado para cualquier ítem que la persona puede abrir o cerrar.
Paso 1: Datos de la cuenta (completado)
Estático (interactive={false}): el header se renderiza sin click ni ícono de alternancia. Conviene para ítems que no deben poder abrirse, como un paso ya completado dentro de un stepper.
El Accordion suele ubicarse dentro de una pantalla de configuración o de un formulario largo, agrupando secciones que comparten el mismo nivel de jerarquía: métodos de envío, reglas de impuestos, preguntas frecuentes de una categoría. Se aplica igual en desktop y en mobile: el ítem ocupa el ancho disponible del contenedor que lo aloja, sin un layout alternativo por dispositivo.
Métodos de envío
Agrupar bajo un mismo Accordion contenido de estructura similar, usando el subtítulo para anticipar de qué trata cada sección.
Evitar mezclar criterios distintos en el mismo grupo, como una pregunta frecuente y una configuración: cada ítem debe representar la misma dimensión.
Usar títulos cortos que resuman la sección, dejando el detalle para el cuerpo del ítem.
Evitar títulos tan largos que ya anticipan todo el contenido, sin dejar nada para el cuerpo del ítem.
- Foco y activación por teclado: el header interactivo se renderiza como un <button> nativo, por lo que recibe foco con Tab y se activa con Enter o Space sin necesidad de reimplementar el manejo de teclado.
- Ítems no interactivos fuera del flujo de tabulación: con interactive={false} el header se renderiza como un <div> estático, sin foco ni click. Usarlo solo para ítems que no deben poder abrirse, como un paso ya completado dentro de un stepper.
- Estado abierto o cerrado comunicado solo de forma visual: el ícono de alternancia y el cambio de fondo indican si el ítem está abierto, pero el componente no establece aria-expanded ni aria-controls automáticamente. Si el contenido del Accordion es crítico para la navegación con lector de pantalla, agregar esos atributos manualmente en el header.
- Etiqueta accesible en indicadores personalizados: al reemplazar el ícono de alternancia por otro control con noIconToggle (ej. un Radio), ese control necesita su propio aria-label, ya que el Accordion no expone una etiqueta accesible propia para el ítem.
Instalá el componente via terminal.
npm install @nimbus-ds/accordionimport React from "react";
import { Accordion, Text } from "@nimbus-ds/components";
import { QuestionCircleIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<Accordion selectedDefault="0">
<Accordion.Item index="0">
<Accordion.Header
icon={<QuestionCircleIcon size={18} />}
title="¿Cómo cambio el método de envío?"
subtitle="Configuración de envíos"
/>
<Accordion.Body>
<Text>
Ingresá a Configuración > Envíos y elegí los métodos que querés
ofrecer en tu tienda.
</Text>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item index="1">
<Accordion.Header
borderBottom="base"
icon={<QuestionCircleIcon size={18} />}
title="¿Cómo agrego un medio de pago?"
subtitle="Configuración de pagos"
/>
<Accordion.Body borderBottom="base">
<Text>
Ingresá a Configuración > Medios de pago y activá el que
necesites.
</Text>
</Accordion.Body>
</Accordion.Item>
</Accordion>
);
export default Example;Las propiedades adicionales se pasan al elemento <Accordion>. Consultá la documentación del elemento div para ver la lista de atributos aceptados.
- Tabs — para mostrar varias secciones de contenido extenso que la persona puede comparar entre sí, no solo una a la vez.
- SegmentedControl — para alternar entre vistas del mismo contenido o filtrar con pocas opciones, en vez de revelar contenido adicional.
- Card — usada como contenedor opcional para agrupar visualmente los ítems del Accordion.
- Radio — usado como indicador de apertura personalizado cuando el ítem representa una opción dentro de una selección.
Accordion
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | The content of the accordion. | |
selectedDefault | string | Informs which accordion item is open by default, this value must be the same as informed in the index of each item | |
selectedItem* | string | The currently selected accordion item ID. | |
onItemSelect | object | Callback fired when the selected accordion item changes. |
Accordion.Body
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the accordion body. | |
borderBottom | 'base' | 'none' | The borderBottom property defines a lower border of the accordion body. |
borderTop | 'base' | 'none' | The borderTop property defines a top border of the accordion body. |
padding | 'base' | 'base' | Padding properties are used to generate space around the content area of an Accordion.Body.. |
Accordion.Item
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | The content of the accordion body. | |
index* | string | Unique indicator to identify accordion items | |
interactive | boolean | 'true' | Determines if the accordion item is interactive (clickable) or static. When false, the header renders as a div without click handlers, hover effects, or toggle icon. |
testId | string | This is an attribute used to identify a DOM node for testing purposes. |
Accordion.Header
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | ((data: { selected: string; index: string }) => React.ReactNode); | The content of the accordion header. | |
title | string | The title to display in the accordion header. | |
subtitle | string | The subtitle to display in the accordion header. | |
icon | React.ReactNode | The SVG contents to display in the accordion header. | |
noIconToggle | boolean | 'false' | Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator. |
borderTop | 'base' | 'base' | The borderTop property defines a lower border of the accordion header. |
borderBottom | 'base' | The borderBottom property defines a lower border of the accordion header. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.