Accordion
Accordion é um componente que permite expandir ou recolher seções de conteúdo, otimizando o espaço em tela e facilitando a leitura de informações organizadas em tópicos.
Uso
Use o Accordion quando houver necessidade de exibir múltiplos blocos de conteúdo de forma colapsada, especialmente em contextos como perguntas frequentes (FAQ). Ele é útil para reduzir a carga cognitiva, evitando a exibição de textos longos de forma permanente, e permite que o usuário escolha o que deseja expandir.
Anatomia
❖. Container
Agrupa todos os elementos internos do Accordion.
Pode conter um ou mais itens independentes.
Não recebe conteúdo diretamente, mas organiza visualmente os demais elementos.
1. Label
Recebe o texto da pergunta ou título do conteúdo.
Obrigatório.
Deve ser breve e descritivo, permitindo identificar rapidamente o conteúdo ao qual se refere.
Em listas, recomenda-se manter consistência na formatação.
2. Text
Recebe o conteúdo descritivo ou explicação correspondente ao Label.
Obrigatório.
Deve suportar blocos de texto com diferentes comprimentos.
Pode conter quebras de linha e outros elementos inline (como links), conforme o conteúdo exigir.
3. Divider
Elemento visual embutido que separa os itens da lista.
Não aparece no último item da sequência.
Não recebe conteúdo, apenas reforça a separação visual.
4. Chevron Icon
Indica visualmente a ação de expandir/recolher o conteúdo.
Não recebe conteúdo diretamente, mas pode ser rotacionado conforme o estado (aberto ou fechado).
Deve ser claramente visível e seguir padrões de acessibilidade visual.
Histórico de Atualizações
Atualizado