Pular para o conteúdo principal

Accordion​

Componente Accordion

📘 Modo de Uso​

O componente Accordion é uma coleção de elementos de cabeçalho e corpo dispostos verticalmente em formato colapsável.
Ele deve ser usado para exibir informações de forma organizada, permitindo que o usuário revele ou esconda conteúdos conforme sua necessidade.

Um caso de uso comum é em seções de FAQ, onde cada item exibe uma pergunta (cabeçalho) e sua resposta (corpo) apenas quando expandido.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.surfaces.component.accordion

🎨 Variantes​

Variantes​

Variantes

Estados​

Estados

Opções​

Opções

📝 Observações​

Esse componente possui interação(ões) configuradas na área de protótipo. Use as funcionalidades de prototype para explorar o comportamento de abrir e fechar os elementos.

🛡️ Boas Práticas e Acessibilidade​

  • Use títulos claros e descritivos nos cabeçalhos, facilitando a compreensão do conteúdo escondido.
  • Garanta que apenas um item esteja expandido por vez quando houver muitos elementos (para evitar sobrecarga visual).
  • Sempre que possível, preserve o estado expandido/recolhido ao navegar entre páginas ou atualizar o conteúdo.
  • Certifique-se de que os elementos sejam navegáveis via teclado e compatíveis com leitores de tela (WCAG 2.1: 2.1.1 e 4.1.2).