Collapsible

Componente interativo que expande e recolhe um painel.

Exemplos

Padrão

Aberto por padrão

Com animação (accordion)

Com animação (fade)

API

Collapsible

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
open	boolean	true, false	-	Controla o estado aberto (controlado).
defaultOpen	boolean	true, false	false	Define se o conteúdo começa aberto (não controlado).
onOpenChange	(open: boolean) => void	-	-	Função chamada quando o estado aberto muda.
animation	"accordion" | "fade"	accordion, fade	-	Tipo de animação a aplicar. Quando definida, ativa uma animação suave ao expandir e recolher. accordion anima a altura (estilo accordion), fade anima a opacidade. Se não for informada, nenhuma animação é aplicada.
...props	Todas as props de Radix Collapsible.Root	-	-	Todas as propriedades nativas do componente Collapsible Root do Radix UI.

CollapsibleTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
asChild	boolean	true, false	false	Quando true, usa o elemento filho como trigger.
disabled	boolean	true, false	false	Desabilita a interação com o trigger.
...props	Todas as props de Radix Collapsible.Trigger	-	-	Todas as propriedades nativas do componente Collapsible Trigger do Radix UI.

CollapsibleContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao wrapper do conteúdo.
...props	Todas as props de Radix Collapsible.Content	-	-	Todas as propriedades nativas do componente Collapsible Content do Radix UI.