Capítulo 36 de 108

Accordion

Core Idea

A vertically stacked set of interactive headings that each reveal a section of content. Use for FAQs, settings groups, or any collapsible content list.

Key Concepts

  • defaultValue: array of value strings for items open by default, e.g. defaultValue={["item-1"]}.
  • multiple: boolean prop on Accordion that allows more than one item open simultaneously (default is single-open).
  • AccordionItem.disabled: disables an individual item so its trigger can't be activated.
  • value: required unique identifier per AccordionItem, used by defaultValue/value to control open state.
  • Composition is strict: Accordion > AccordionItem > (AccordionTrigger, AccordionContent).

Code Examples

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
  • O que demonstra: composição mínima e obrigatória.
<Accordion multiple className="max-w-lg" defaultValue={["notifications"]}>
  {items.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>{item.trigger}</AccordionTrigger>
      <AccordionContent>{item.content}</AccordionContent>
    </AccordionItem>
  ))}
</Accordion>
  • O que demonstra: multiple para permitir vários itens abertos ao mesmo tempo, renderizando via .map.
<Accordion className="max-w-lg rounded-lg border" defaultValue={["billing"]}>
  {items.map((item) => (
    <AccordionItem
      key={item.value}
      value={item.value}
      className="border-b px-4 last:border-b-0"
    >
      <AccordionTrigger>{item.trigger}</AccordionTrigger>
      <AccordionContent>{item.content}</AccordionContent>
    </AccordionItem>
  ))}
</Accordion>
  • O que demonstra: padrão de bordas: border no Accordion, border-b last:border-b-0 em cada AccordionItem.

Composition

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Anti-patterns

  • Esquecer value único por AccordionItem: sem value, defaultValue/controle de estado não funciona.
  • Usar multiple esperando comportamento padrão single-open: sem essa prop, abrir um item fecha os outros; adicionar multiple explicitamente quando o requisito é permitir vários abertos.

Key Takeaways

  1. defaultValue é sempre array, mesmo com um único item aberto.
  2. multiple transforma o accordion de single-open (padrão) para multi-open.
  3. disabled funciona por item (AccordionItem), não globalmente no Accordion.
  4. Bordas/cartões são estilização via className, não props dedicadas (border-b last:border-b-0 é o padrão recomendado).
  5. Combina bem dentro de Card (CardHeader+CardContent) para blocos de FAQ com título.

Connects To

  • Card: wrapper comum para dar título/descrição a um Accordion de FAQ.
  • Collapsible: primitivo mais simples para um único trecho expansível, sem múltiplos itens.
AnteriorLabelPróximoBreadcrumb