Accordion
Permite condensar conteúdo de estrutura similar em seções recolhíveis, revelando o detalhe de uma por vez.
- Condensar conteúdo de estrutura similar: mostrar várias seções equivalentes ocultas por padrão, deixando visível apenas o título. Ex.: perguntas frequentes, métodos de envio disponíveis.
- Economizar espaço em telas com muita informação: revelar o detalhe de uma seção somente quando a pessoa precisa, em vez de mostrar todo o conteúdo de uma vez. Ex.: regras de impostos agrupadas por categoria de produto.
- Guiar a atenção para uma única seção por vez: quando o design precisa que, ao abrir um item, o anterior se feche automaticamente, já que esse é o comportamento padrão do componente.
- Mostrar várias seções abertas simultaneamente: dentro de um mesmo grupo, o Accordion permite apenas um item aberto por vez. Se a pessoa precisa comparar o conteúdo de mais de uma seção ao mesmo tempo, usar Tabs ou mostrar o conteúdo diretamente, sem ocultá-lo.
- Alternar entre visualizações de um mesmo conteúdo: se o objetivo é mudar a forma de ver a mesma informação, e não revelar conteúdo adicional, usar SegmentedControl ou Tabs.
- Navegar para outra tela: o título de um item não substitui uma navegação. Se cada "seção" na verdade leva a uma tela diferente, usar List com Link em vez de simular conteúdo que não está ali.
- Header (componente Accordion.Header): linha que dispara a abertura e o fechamento do item ao clicar.
- Icon (opcional): elemento posicionado antes do título, que reforça o conteúdo da seção.
- Title: texto principal do cabeçalho.
- Subtitle (opcional): texto secundário, abaixo do título, que antecipa de que trata a seção.
- Toggle icon (opcional): ícone que indica se o item está fechado ou aberto; é ocultado com noIconToggle.
- Body (componente Accordion.Body): container do conteúdo revelado ao abrir o item.
Ícone de alternância (default): o chevron indica se o item está fechado ou aberto. É o comportamento recomendado para a maioria dos casos. Ex.: uma lista de perguntas frequentes.
Cartão de crédito
Indicador personalizado (noIconToggle): oculta o chevron para substituí-lo por outro controle, como um Radio. Conveniente quando o item representa uma opção dentro de uma seleção, não apenas conteúdo a revelar. Ex.: escolher uma forma de pagamento entre várias opções.
Interativo (default): o header responde ao clique e mostra o ícone de alternância. É o comportamento esperado para qualquer item que a pessoa pode abrir ou fechar.
Etapa 1: Dados da conta (concluída)
Estático (interactive={false}): o header é renderizado sem clique nem ícone de alternância. Conveniente para itens que não devem poder ser abertos, como uma etapa já concluída dentro de um stepper.
O Accordion costuma ficar dentro de uma tela de configuração ou de um formulário longo, agrupando seções que compartilham o mesmo nível de hierarquia: métodos de envio, regras de impostos, perguntas frequentes de uma categoria. É aplicado da mesma forma em desktop e em mobile: o item ocupa a largura disponível do container que o hospeda, sem um layout alternativo por dispositivo.
Métodos de envio
Agrupar sob um mesmo Accordion conteúdo de estrutura similar, usando o subtítulo para antecipar de que trata cada seção.
Evitar misturar critérios distintos no mesmo grupo, como uma pergunta frequente e uma configuração: cada item deve representar a mesma dimensão.
Usar títulos curtos que resumam a seção, deixando o detalhe para o corpo do item.
Evitar títulos tão longos que já antecipam todo o conteúdo, sem deixar nada para o corpo do item.
- Foco e ativação por teclado: o header interativo é renderizado como um <button> nativo, por isso recebe foco com Tab e é ativado com Enter ou Space sem necessidade de reimplementar o gerenciamento de teclado.
- Itens não interativos fora do fluxo de tabulação: com interactive={false} o header é renderizado como um <div> estático, sem foco nem clique. Use apenas para itens que não devem poder ser abertos, como uma etapa já concluída dentro de um stepper.
- Estado aberto ou fechado comunicado apenas de forma visual: o ícone de alternância e a mudança de fundo indicam se o item está aberto, mas o componente não define aria-expanded nem aria-controls automaticamente. Se o conteúdo do Accordion for crítico para a navegação com leitor de tela, adicione esses atributos manualmente no header.
- Rótulo acessível em indicadores personalizados: ao substituir o ícone de alternância por outro controle com noIconToggle (ex.: um Radio), esse controle precisa do próprio aria-label, já que o Accordion não expõe um rótulo acessível próprio para o item.
Instale o 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;As propriedades adicionais são passadas ao elemento <Accordion>. Consulte a documentação do elemento div para ver a lista de atributos aceitos.
- Tabs — para mostrar várias seções de conteúdo extenso que a pessoa pode comparar entre si, não apenas uma por vez.
- SegmentedControl — para alternar entre visualizações do mesmo conteúdo ou filtrar com poucas opções, em vez de revelar conteúdo adicional.
- Card — usada como container opcional para agrupar visualmente os itens do Accordion.
- Radio — usado como indicador de abertura personalizado quando o item representa uma opção dentro de uma seleção.
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. |
Ajude-nos a melhorar a documentação
Encontrou um problema ou tem uma sugestão? Conte para a gente.