Capítulo 73 de 108

Collapsible

Core Idea

Interactive panel that expands/collapses, built on Base UI's Collapsible primitive. Use for progressive disclosure of secondary content (details, settings, file trees) without a full accordion.

Key Concepts

  • Collapsible: Root component; accepts open/onOpenChange for controlled state.
  • CollapsibleTrigger: Toggles the panel; use render={<Button .../>} to compose with an existing element instead of a default trigger.
  • CollapsibleContent: The collapsible panel body.
  • data-open / group-data-panel-open: State-based data attributes for styling the trigger/icon when open (e.g. rotating a chevron).

Code Examples

const [isOpen, setIsOpen] = React.useState(false)

<Collapsible open={isOpen} onOpenChange={setIsOpen} className="flex w-[350px] flex-col gap-2">
  <div className="flex items-center justify-between gap-4 px-4">
    <h4 className="text-sm font-semibold">Order #4189</h4>
    <CollapsibleTrigger render={<Button variant="ghost" size="icon" className="size-8" />}>
      <ChevronsUpDown />
      <span className="sr-only">Toggle details</span>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent className="flex flex-col gap-2">
    <div className="rounded-md border px-4 py-2 text-sm">...</div>
  </CollapsibleContent>
</Collapsible>
  • O que demonstra: Estado controlado com open/onOpenChange e trigger composto via render.
<CollapsibleTrigger render={<Button variant="ghost" className="w-full" />}>
  Product details
  <ChevronDownIcon className="ml-auto group-data-panel-open/button:rotate-180" />
</CollapsibleTrigger>
  • O que demonstra: Rotacionar ícone via classe utilitária reagindo ao estado data-panel-open do grupo.

Composition

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Anti-patterns

  • Não usar para navegação em árvore muito profunda sem indentação consistente: use nested Collapsible (padrão File Tree), mas cuide da indentação (ml-5) em cada nível.

Key Takeaways

  1. Requer @base-ui/react como dependência ao instalar manualmente.
  2. render prop é o padrão do Base UI para compor o trigger com qualquer componente (ex: Button).
  3. Estado não-controlado funciona sem open/onOpenChange; use controlado só quando precisar sincronizar com outro elemento (ex: ícone maximize/minimize).
  4. CollapsibleContent pode usar grid-cols-subgrid para alinhar campos extras à grade do conteúdo visível.
  5. Nested Collapsible compõe file trees/menus hierárquicos.

Connects To

  • Accordion: alternativa quando há múltiplos painéis exclusivos entre si.
  • RTL: suporta dir prop para inverter layout.
AnteriorKbdPróximoToggle