Collapsible

Quando usar

Use o collapsible para esconder um bloco de conteudo secundario atras de um gatilho unico: um painel de filtros avancados, detalhes tecnicos de uma posicao, uma nota de rodape longa. Ele nao tem cor, borda nem seta embutida: e o primitivo cru, para quando o Accordion (com seus varios itens, cabecalho e chevron) e opinativo demais para o caso.

Quando nao usar

Nao use collapsible quando existem varios paineis que competem pelo mesmo espaco e devem abrir e fechar em conjunto (por exemplo, um so aberto por vez): isso e o papel do Accordion, que ja modela essa relacao entre itens. Nao use collapsible para navegacao entre paginas ou abas visiveis ao mesmo tempo: isso e Tabs.

Anatomia

• Collapsible (data-slot="collapsible"): a raiz, guarda o estado aberto/fechado.
• CollapsibleTrigger (data-slot="collapsible-trigger"): o elemento que alterna o estado ao ser clicado ou acionado por teclado. Sem estilo visual proprio alem do foco e do estado desabilitado: cor, tamanho e cursor sao decisao de quem compoe.
• CollapsibleContent (data-slot="collapsible-content"): o bloco que aparece e some. So existe no DOM enquanto aberto (o Radix desmonta ao fechar, nao apenas esconde com CSS).

Composicao tipica:

<Collapsible>
  <CollapsibleTrigger>Mostrar filtros avancados</CollapsibleTrigger>
  <CollapsibleContent>{/* campos de filtro */}</CollapsibleContent>
</Collapsible>

Acessibilidade

O gatilho e um <button> com aria-expanded sincronizado ao estado, e aria-controls apontando para o conteudo. Funciona por teclado: Tab foca o gatilho, Enter ou Espaco alterna. Estado desabilitado usa o atributo disabled nativo (passe disabled na raiz Collapsible), nunca so opacidade. Como o componente nao renderiza texto proprio, o rotulo do gatilho vem do conteudo que o consumidor passa como filho.