Chuv Studio

02 — COMPONENTS

Accordion

Seções expansíveis com animação. Construído sobre @base-ui/react/accordion. Suporta modo single e múltiplo.

Single

type="single" — apenas um item aberto por vez, collapsible

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Título</AccordionTrigger>
    <AccordionContent>Conteúdo</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple

type="multiple" — vários itens abertos simultaneamente

É o conjunto de tokens, componentes e padrões visuais que guiam toda a produção de interfaces da Chuv Studio. Garante consistência entre projetos e acelera o desenvolvimento.

Sim. Defina type="multiple" no componente Accordion. Para permitir apenas um item aberto por vez, use type="single" com a prop collapsible.

<Accordion type="multiple" defaultValue={["item-1", "item-3"]}>
  ...
</Accordion>

Sem container

Accordion diretamente sobre o fundo, sem box branca

{/* sem wrapper adicional */}
<Accordion type="single" collapsible>
  ...
</Accordion>

Uso

Import e props disponíveis

Import

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

Props — Accordion

type

"single" | "multiple"

Modo de abertura

collapsible

boolean

Permite fechar o item aberto (só com type="single")

defaultValue

string | string[]

Item(s) aberto(s) por padrão (não controlado)

value

string | string[]

Item(s) aberto(s) (controlado)

onValueChange

(value) => void

Callback ao mudar seleção

Acessibilidade

  • Triggers são elementos button — navegáveis por teclado
  • Enter / Space abrem e fecham o item focado
  • Tab move o foco entre triggers
  • ARIA aria-expanded e aria-controls aplicados automaticamente

Chuv Studio Design System · Component: accordion.tsx · @base-ui/react/accordion