Design System

Accordion

Painéis expansíveis para organizar conteúdo em seções colapsáveis. Construído sobre Radix UI Accordion. Ideal para FAQs, configurações e detalhes agrupados.

import {
  Accordion, AccordionContent,
  AccordionItem, AccordionTrigger,
} from "@workspace/ui/components/accordion";

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Título da seção</AccordionTrigger>
    <AccordionContent>Conteúdo expandido.</AccordionContent>
  </AccordionItem>
</Accordion>

FAQ

Perguntas frequentes com abertura individual.

Múltiplos abertos

Permite abrir várias seções simultaneamente com type="multiple".

O frete é calculado automaticamente via Frenet com base no CEP de destino.

Aceitamos PIX (via Pagarme) e cartão de crédito com parcelamento em até 12x.

API Reference

PropTypeDefaultDescrição
type'single' | 'multiple'Modo de abertura: uma ou várias seções por vez
collapsiblebooleanfalsePermite fechar todas as seções (apenas type='single')
defaultValuestring | string[]Seção(ões) aberta(s) inicialmente
valuestring | string[]Seção(ões) aberta(s) (controlado)
onValueChange(value: string | string[]) => voidCallback quando a seleção muda
AccordionItem.valuestringIdentificador único da seção