Visão geral

O Collapsible é mais primitivo que o Accordion: você controla completamente o trigger e o visual do container.

Demo interativa

Repositórios recentes

design-system-mn

Import

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"

Diferença em relação ao Accordion

Use Collapsible quando precisar de um único bloco expansível com trigger customizado. Use Accordion quando tiver múltiplos itens e quiser gerenciamento automático de abertura/fechamento.

Padrão de implementação

Snippets para o uso controlado e não-controlado do Collapsible.

Collapsible controlado

"use client"
import { useState } from "react"
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"

export function MeuCollapsible() {
  const [open, setOpen] = useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-medium">Detalhes adicionais</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon-sm">
            <ChevronsUpDownIcon />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent>
        <p className="text-sm text-muted-foreground mt-2">
          Conteúdo expandido que fica oculto por padrão.
        </p>
      </CollapsibleContent>
    </Collapsible>
  )
}

Collapsible não-controlado (defaultOpen)

<Collapsible defaultOpen>
  <CollapsibleTrigger>Ver mais</CollapsibleTrigger>
  <CollapsibleContent>
    Conteúdo adicional...
  </CollapsibleContent>
</Collapsible>

Props e uso

API dos sub-componentes do Collapsible.

Props principais

open

boolean

Estado controlado de abertura.

defaultOpen

boolean

Estado inicial não-controlado.

onOpenChange

(open: boolean) => void

Callback chamado ao abrir/fechar.

disabled

boolean

Desabilita a abertura/fechamento.

CollapsibleTrigger asChild

boolean

Mescla o trigger com o filho. Use para ter um Button ou elemento customizado como trigger.

Acessibilidade

O CollapsibleTrigger gerencia automaticamente os atributos aria-expanded e aria-controls.

Use asChild no trigger para que o elemento filho herde os atributos de acessibilidade.

O conteúdo colapsado é removido visualmente mas permanece no DOM com hidden quando fechado.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter