Pular para o conteúdo
Faculdade PhorteDesign System

Accordion

Em andamento

Lista de seções recolhíveis: cada título é um botão dentro de um cabeçalho que abre e fecha o conteúdo abaixo. Uma aberta por vez, ou várias com allowMultiple, em tema claro ou escuro; pode abrir já num item e ser controlada de fora.

Função
Conteúdo
Também chamado de
sanfona, acordeão, recolhível, expansível, accordion
Mora em
app/components/molecules/Accordion.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Permite Varias
  3. Conteúdo próprio
  4. Tema escuro
  5. Aberto de início

Quando usar

Para perguntas e conteúdos longos que não precisam aparecer todos de uma vez — módulos de um curso, regras de uma bolsa.

Faça

  • Escreva cada título como a pergunta ou o assunto inteiro — é o nome do botão.
  • Acerte nivelDoTitulo pela página (padrão 3): é por ele que quem usa leitor pula de item em item pela tecla H.
  • Use allowMultiple quando a pessoa precisar comparar dois itens abertos.
  • Use tema="escuro" sobre fundo escuro: o anel de foco passa a ser o claro, e o subtítulo, claro (E65).
  • Abra no máximo um de início, com defaultOpenIds — a grade no módulo atual (E65).
  • Use openIds e onOpenChange para abrir por fora: um link direto para uma pergunta.

Evite

  • Esconder no acordeão a informação que quase todos precisam: o que é essencial fica à vista.
  • Vários itens abertos de saída: vira uma página comprida sem o índice que o acordeão prometia.
  • Um item só: sem outros, é só um botão de "mostrar mais".

Quando não usar. Para perguntas frequentes com título de seção e botão "ver todas", use o FAQ (que já usa o Accordion). Para a grade curricular, o CurriculumAccordion. Para alternar seções longas, o CourseTabs.

Nota de uso

Teclado (E65): Enter e Espaço abrem e fecham; o Tab entra no painel aberto (decisão local, para o texto revelado entrar no caminho) e segue para o próximo item. Não esconda aqui o que é essencial, e abra no máximo um de início (defaultOpenIds). Para abrir por fora — um link direto para uma pergunta —, openIds e onOpenChange. Ganhou aria-expanded e aria-controls na E08b — antes, quem ouvia não sabia se a seção estava aberta. O conteúdo recolhido também saiu da ordem de tabulação. A prop variant existia na interface e não fazia nada; foi removida. No tema escuro (o padrão do FAQ), o anel de foco é o inverso, claro: o --ring media 2,38:1 ali e sumia. Cada pergunta é um cabeçalho (nivelDoTitulo, padrão 3) com o botão dentro: é por ele que quem usa leitor pula de pergunta em pergunta pela tecla H. Acerte o nível conforme a página.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Item — Caixa de cantos `rounded-2xl` com borda.
  2. Cabeçalho — `h2` a `h6` (padrão `h3`), sem estilo próprio.
  3. Botão — Ocupa a largura: subtítulo opcional (verde no claro, `--ink-inverse-muted` no escuro), título em negrito e a seta num círculo.
  4. Painel — `role="region"` nomeada pelo botão, com o conteúdo.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Fechadoaria-expanded="false", painel hidden e fora do Tab.
Abertoaria-expanded="true", painel à mostra, seta girada 180° e o painel recebendo foco (tabIndex={0}).
FocoAnel por dentro do botão: ring-ring no claro, ring-ring-inverse no escuro.
HoverFundo leve no botão; no claro, a sombra do item aumenta.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Abrir um item (padrão)Fecha o que estava aberto — medido: com o Módulo I aberto, abrir o Módulo II fecha o I.
Abrir com `allowMultiple`Os outros continuam abertos — medido: dois abertos.
Clicar de novo no abertoFecha — e o painel volta ao hidden, conferido no teste da ficha.
Com `defaultOpenIds`Abre de saída nos itens pedidos (E65).
Modo controlado (`openIds`)Quem manda é o consumidor; onOpenChange recebe a lista nova a cada troca, nos dois modos — conferido no teste da ficha.

Relacionados