Intro
O Accordion é um componente de expansão e recolhimento progressivo de conteúdo. Ele permite organizar informações extensas em seções colapsáveis, reduzindo carga cognitiva e melhorando a escaneabilidade da interface.
É indicado quando
- Há múltiplos blocos de conteúdo relacionados
- O usuário precisa explorar informações sob demanda
- A densidade informacional da página é elevada
- O layout exige economia de espaço vertical
No ecossistema do Design System, o Accordion é classificado como:
- Componente estrutural de organização de conteúdo
- Pode conter componentes compostos internamente (Cards, Lists, Buttons, Feedback, Grid)
Anatomia Visual
Estrutura Base
- Titulo da seção do accordion por recomendação sempre deve estar presente no uso do componente;
- Área de ações do accordion tem como objetivo centralizar as ações que possa conter no mesmo a principal ação que deve esta sempre presente em um accordion é a ação de collapsed onde o usuário pode interagir (recolher, exibir) o conteúdo do mesmo além de possuir outras ações:
- Conjunto de ações presentes na estrutura, ela por padrão é opcional mas caso seja necessário pode ser acrescentado conforme o modelo, seguindo os posicionamento de ações;
- Área de conteúdo do accordion, essa área funciona como um slot que o produto ou serviço que estiver implementando possa usar para customizar o conjunto de informações que será disponibilizado dentro do mesmo a alguns elementos secundários que o próprio accordion disponibiliza para padronizações dele:
- SubAccordion pode estar presentes em alguns cenários e a visão pode ser útil a quem esta realizando a implementação;
- Slot são espaços reservado para composição de conteúdos diversos dentro do accordion, pode ser substituídos por outros componentes como (Textfield, Label Content, Avatar, Table, etc…);
- Feedbacks para FAQs esse é um recurso presente dentro dos accordions por padrão mas é opcional pode aparecer em contextos de FAQs para relevância da informação que esta sendo apresentadas ao usuário;
Estados
- Default (colapsado)
- Hover (sobre header)
- Focus (navegação via teclado)
- Expanded (aberto)
- Disabled (quando aplicável)
Características
Comportamento
- Clique no header alterna estado expandido/colapsado
- Pode permitir:
- Expansão múltipla
- Expansão única (modo exclusivo)
- Animação suave (150ms–250ms)
Performance
- Conteúdo pesado pode ser carregado sob demanda (lazy rendering)
- Evitar múltiplos Accordions aninhados excessivamente
Uso
Quando usar
- FAQ
- Explicações técnicas extensas
- Informações legais ou normativas
- Blocos administrativos
- Agrupamento de funcionalidades
Quando não usar
- Para navegação primária
- Para conteúdo crítico que precisa estar sempre visível
- Para esconder informações essenciais
O que fazer / O que não fazer
✅ Faça
- Use títulos claros e objetivos
- Mantenha hierarquia tipográfica consistente
- Utilize ícone indicador padronizado
- Garanta acessibilidade via teclado
- Mantenha espaçamento interno consistente
❌ Não faça
- Não esconda conteúdo essencial
- Não utilize textos vagos como “Clique aqui”
- Não misture padrões visuais diferentes dentro do mesmo Accordion
- Não utilize animações longas ou exageradas
- Não aninhe múltiplos níveis sem justificativa funcional