Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Accordion

Sanfona (acordeão) — uma pilha de títulos que abrem cada um a sua seção no lugar, para conteúdo longo que se lê por partes, como um FAQ. O Collapsible é a versão única, para um só mostrar/esconder.

Feito com Base UIPadrão WAI-ARIA AccordionComponente clienteCódigo ↗
minimal · light · #3fa34d

multiple

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.

import { Accordion, AccordionItem, AccordionTrigger, AccordionPanel, Collapsible, CollapsibleTrigger, CollapsiblePanel } from "@camaleo/react";

Anatomia

O AccordionTrigger coloca o botão dentro de um título, então as seções aparecem na lista de títulos do leitor de tela. É um h3; use level para encaixar no esquema da página, como level={4} abaixo do título de um card. O painel anima a altura; o espaçamento fica num elemento interno para nada pular. O Collapsible tem o mesmo gatilho e painel, sem o título.

Exemplos

Todo exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor da barra acima. Abra uma seção e depois experimente Tab e Enter.

minimal · light · #3fa34d

Cultivado a 1.200 m na Serra da Mantiqueira, em Minas Gerais, pela família Silva. Colhido em julho de 2026.

15 g de café para 250 ml de água a 93 °C. Moagem média-fina no coador, grossa na prensa francesa.

Várias abertas

Com multiple, abrir uma seção mantém as outras abertas. Use quando a pessoa lê as seções lado a lado; o defaultValue abre as que a maioria precisa.

Seções de um formulário

Divida configurações longas em seções preenchidas uma por vez. O keepMounted mantém no formulário os campos das seções fechadas, então o que foi digitado ainda é enviado.

Abrir todas

Clique no botão. Com value e onValueChange você controla quais seções estão abertas, e um botão só abre ou fecha todas.

Achado pela busca da página

Aperte Ctrl+F e busque "nota fiscal". Com hiddenUntilFound, os painéis fechados continuam na página e abrem quando o navegador encontra o texto neles.

Os repasses abrem quando sua conta bancária for verificada. Isso costuma levar até 2 dias úteis.

Desativada, com o motivo

O Tab pula um título desativado, então deixe o motivo em texto visível ao lado: diga por que está fechado e quando abre.

Exportar pedidos

Opções avançadas

O Collapsible esconde opções de que a maioria nunca precisa, então o formulário fica curto e os padrões fazem o trabalho.

O plano Pro inclui
  • Produtos ilimitados
  • Até 3 lojas
  • E-mails de carrinho abandonado

Mostrar mais

Clique nele. Os itens extras aparecem logo acima do botão, onde a leitura parou, e o rótulo diz o que ele fará em seguida.

Em contexto

São pedaços inteiros de interface que você pode copiar, no estilo que escolheu.

Central de ajuda

Respostas para as perguntas que mais recebemos.

Sim, em até 30 dias depois da entrega, na embalagem original. Peça a devolução em Meus pedidos e enviamos uma etiqueta paga.

Ainda precisa de ajuda?
Central de ajudaCard · SearchInput · Accordion · Button
Filtros de produtosAccordion · Checkbox · RadioGroup · Badge

Resumo do pedido

Subtotal
R$ 186,40
Frete
Grátis
Total
R$ 186,40
Resumo do pedidoCard · Collapsible · Separator · Button

Boas práticas

FaçaTítulos que dizem o que há dentro.

Uma pergunta ou um assunto mostra se vale abrir, e fica claro numa lista de títulos.

EviteTítulos vagos.

"Mais informações" e "Outros" obrigam a pessoa a abrir todas as seções para achar qualquer coisa.

PlanoPreçoPedidos
BásicoR$ 29 por mêsAté 100 pedidos
ProR$ 89 por mêsPedidos ilimitados
FaçaO que se compara, lado a lado.

Preços e limites numa tabela só se leem de relance.

EviteEsconder o que a pessoa compara.

Com um plano aberto por vez, a pessoa precisa lembrar o preço do outro.

Props

PropriedadeTipoPadrãoDescrição
valueValue[]—As seções abertas. Use com onValueChange para controlar o estado.
defaultValueValue[]—As seções abertas no início, sem controlar o estado.
disabledbooleanfalseDesativa todas as seções.
hiddenUntilFoundbooleanfalseDeixa a busca do navegador achar o texto das seções fechadas e abri-las. Usa hidden="until-found" e ignora keepMounted.
keepMountedbooleanfalseMantém no DOM o conteúdo das seções fechadas.
onValueChange(value, eventDetails) => void—Chamado quando uma seção abre ou fecha, com a lista das abertas.
multiplebooleanfalseDeixa várias seções abertas ao mesmo tempo.

O AccordionItem recebe um value e disabled. O AccordionTrigger recebe level (1 a 6, padrão 3) para o título em volta dele. AccordionTrigger e AccordionPanel recebem as props do seu elemento.

O Collapsible abre e fecha um painel só:

PropriedadeTipoPadrãoDescrição
openboolean—Se o painel está aberto. Use com onOpenChange para controlar o estado.
defaultOpenbooleanfalseSe o painel começa aberto, sem controlar o estado.
onOpenChange(open, eventDetails) => void—Chamado quando o painel abre ou fecha.
disabledbooleanfalseDesativa o gatilho.
Aceita também todas as props da primitiva por baixo e os atributos nativos.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio accordion.

Atributos

data-opennum item aberto e no seu painel
data-panel-openno gatilho enquanto o painel está aberto
data-disablednum item, gatilho e painel desativados
data-starting-style · data-ending-styleenquanto o painel abre e fecha

Tokens que ele lê

Cor

--cml-border--cml-fg--cml-fg-secondary--cml-focus-offset--cml-focus-ring--cml-focus-width

Forma e tamanho

--cml-border-width--cml-font-size-field

Tipografia e movimento

--cml-duration-base--cml-ease-standard--cml-font-control--cml-font-weight-control

Só deste componente

--cml-accordion-chevron--cml-accordion-plus
/* um mais que vira menos, só na página de ajuda */
.ajuda [data-slot="accordion"] {
  --cml-accordion-chevron: none;
  --cml-accordion-plus: inline-block;
}

Acessibilidade

TabVai para o próximo título, ou para os links e campos de um painel aberto.
Shift + TabVolta para o título ou controle anterior.
Enter / EspaçoAbre ou fecha a seção focada.

Relacionados

TabsVisões da mesma coisa, uma por vez.CardUm contêiner para um resumo com as suas ações.Tree viewItens aninhados que expandem, como pastas.
Esta página foi útil? · Editar esta página no GitHub