Collapsible

Visão geral

Collapsible é o primitivo de disclosure mais simples: um trigger, um painel, um estado aberto/fechado. Três partes - Collapsible (Root), CollapsibleTrigger, CollapsibleContent - envolvem o Radix Collapsible.

Use o Collapsible quando você tem uma coisa que expande: o toggle "mais detalhes" de um card, o expand/collapse de um grupo na sidebar, um disclosure inline dentro de um texto longo. Quando você tem múltiplas seções coordenadas que compartilham navegação por teclado e a invariante de um-aberto, use Accordion - o Accordion é construído sobre os mesmos primitivos, mas coordena um grupo.

Preview

'use client';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@gremorie/rx-display';import { Button } from '@gremorie/rx-forms';import { ChevronDown } from 'lucide-react';import { useState } from 'react';export function CollapsiblePreview() {  const [open, setOpen] = useState(false);  return (    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-md">      <CollapsibleTrigger asChild>        <Button variant="outline" className="w-full justify-between">          What&apos;s inside Gremorie?          <ChevronDown            className={`size-4 transition-transform ${open ? 'rotate-180' : ''}`}          />        </Button>      </CollapsibleTrigger>      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm">        100 primitives across 9 React packages and 4 Angular packages, plus the        token engine, registry, and MCP handler.      </CollapsibleContent>    </Collapsible>  );}

Anatomia

Collapsible                  the Radix Root (holds open / onOpenChange)
├─ CollapsibleTrigger        the toggle (pass asChild to use your own button)
└─ CollapsibleContent        the region revealed when open

Instalação

Uso

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@gremorie/rx-display";
import { Button } from "@gremorie/rx-forms";

export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger asChild>
        <Button variant="outline">Toggle details</Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm">
        Hidden content revealed when the trigger fires.
      </CollapsibleContent>
    </Collapsible>
  );
}

API

<Collapsible>

Envolve o Collapsible.Root do Radix.

<CollapsibleTrigger>

O elemento clicável que alterna o painel. Envolve o Collapsible.Trigger do Radix.

Quando asChild é usado, o filho recebe aria-expanded, aria-controls e o handler de clique.

<CollapsibleContent>

O painel que abre e fecha. Envolve o Collapsible.Content do Radix. Expõe o atributo data-state="open" \| "closed" para que você possa animar via seu próprio CSS ou keyframes do Tailwind.

O CollapsibleContent do Gremorie não vem com animações padrão - adicione animate-collapsible-down / animate-collapsible-up se quiser o reveal padrão, ou componha o seu próprio com seletores data-[state].

Composição

1. <Collapsible> detém o estado aberto/fechado.
2. <CollapsibleTrigger> fica dentro - tipicamente envolvendo um Button via asChild.
3. <CollapsibleContent> guarda o conteúdo oculto. Estilize como quiser; o Radix define hidden quando fechado e data-state="open" quando aberto.

O trigger e o conteúdo podem ficar em qualquer profundidade dentro da raiz - o Radix Collapsible coordena via contexto, não pela ordem do DOM.

Variações

Toggle mostrar mais

'use client';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@gremorie/rx-display';import { Button } from '@gremorie/rx-forms';import { ChevronDown } from 'lucide-react';export function CollapsibleOpenPreview() {  return (    <Collapsible defaultOpen className="w-full max-w-md">      <CollapsibleTrigger asChild>        <Button variant="outline" className="w-full justify-between">          Show full bio          <ChevronDown className="size-4 transition-transform data-[state=open]:rotate-180" />        </Button>      </CollapsibleTrigger>      <CollapsibleContent className="mt-2 rounded-md border p-4 text-sm text-muted-foreground">        Nog is the chief engineer of the Kalvner crew. Implements code, infra,        and ships. Backs up before destructive changes. Never commits secrets.      </CollapsibleContent>    </Collapsible>  );}

defaultOpen renderiza o painel expandido no mount. O chevron gira em data-[state=open] para que o trigger reflita o estado atual. Remova defaultOpen para começar recolhido.

Aberto controlado

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger asChild>
    <Button>{open ? 'Hide' : 'Show'} advanced settings</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <SettingsPanel />
  </CollapsibleContent>
</Collapsible>;

Disclosure inline

<p>
  Gremorie ships 83 primitives.{' '}
  <Collapsible className="inline">
    <CollapsibleTrigger>Show breakdown</CollapsibleTrigger>
    <CollapsibleContent>
      <ul>...</ul>
    </CollapsibleContent>
  </Collapsible>
</p>

Acessibilidade

• ARIA: o trigger recebe aria-expanded (true/false) e aria-controls apontando para o painel de conteúdo; o painel de conteúdo fica hidden quando fechado.
• Teclado: Space ou Enter no trigger alterna o painel. Semântica padrão de <button> ao usar asChild com um Button.
• Foco: o foco permanece no trigger entre as alternâncias. O conteúdo não tem focus-trap - o leitor pode dar Tab por ele quando aberto.
• Animação: use seletores data-[state=open] e data-[state=closed] para que os reveals respeitem prefers-reduced-motion via seus próprios keyframes.
• Estado desabilitado: disabled={true} na raiz desabilita o trigger e o remove da ordem de tabulação.

Relacionados

• Accordion - múltiplos disclosures coordenados com estado compartilhado.
• Card - host típico para um toggle "mostrar mais" de Collapsible.
• Sidebar - usa Collapsible para expand/collapse de grupos.