Accordion

Componentes/Overlay e disclosure

ImplementaçãoHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Organiza conteúdo relacionado em seções que podem ser expandidas ou recolhidas.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Abrir playground React · shadcn/Base UI

Anatomia

Configurações avançadas

Conteúdo expandido do painel.

1 2 3 4 5 6

1 .ds-accordion — grupo de itens relacionados.
2 .ds-accordion__item — container visual de cada seção.
3 .ds-accordion__trigger — botão que alterna aria-expanded.
4 .ds-accordion__leading-icon — ícone Lucide opcional.
5 .ds-accordion__chevron — indicador visual do estado aberto/fechado.
6 .ds-accordion__panel — slot de conteúdo associado ao trigger.

Padrão

Use um button para o trigger. O helper da documentação sincroniza aria-expanded, hidden e data-state; em produto, mantenha esse mesmo contrato.

Billing details

Invoices are generated on the first business day of each month and sent to account owners.

Security settings

Conteúdo customizado

O painel é um slot. Componha conteúdo complexo com componentes públicos do DS, sem usar classes internas isoladas.

Plano atual

Team Pro

Até 25 usuários, billing mensal e permissões avançadas.

Alterar plano

Disabled

Configuração bloqueada

API no Figma

O component set vivo expõe Title, não Label. Use o nome da propriedade pública do Figma para handoff e documentação; a classe CSS continua .ds-accordion__title.

Propriedade	Tipo	Equivalente no repo
Title	TEXT	.ds-accordion__title
Content	TEXT	.ds-accordion__panel com texto simples
Content Slot	SLOT	Conteúdo customizado dentro de .ds-accordion__panel.
Show Leading Icon	BOOLEAN	Renderizar ou omitir .ds-accordion__leading-icon.
Leading Icon	INSTANCE_SWAP	Ícone Lucide com data-lucide.
State	VARIANT	Default, Hover, Focus, Disabled
Open	VARIANT	aria-expanded, hidden e data-state

Mapeamento de tokens

Parte	CSS	Token atual
Item	.ds-accordion__item	component.accordion.item.{radius,border-width,bg,border-color}
Trigger	.ds-accordion__trigger	component.accordion.trigger.{height,padding,gap}
Title	.ds-accordion__title	component.accordion.trigger.content.color + typography body/md bold
Content	.ds-accordion__panel	component.accordion.content.{color,padding,gap}
Chevron	.ds-accordion__chevron	component.accordion.chevron.{size,color,stroke-width}
Leading icon	.ds-accordion__leading-icon	component.accordion.leading-icon.{size,color,stroke-width}
Focus ring	.ds-accordion__trigger:focus-visible	component.accordion.focus-ring.radius.default + component.focus-ring.*

Uso

Quando usar

Use Accordion quando

O usuário precisa comparar ou explorar seções relacionadas, como FAQ, configurações agrupadas, detalhes progressivos ou conteúdo secundário que não precisa estar todo aberto ao mesmo tempo.

Não use Accordion quando

A navegação troca views primárias (use Tabs), o conteúdo é um menu de comandos (use Menu/Action Menu), ou a informação precisa estar sempre visível para tomada de decisão.

Boas práticas

Entrega

Endereço e janela de recebimento.

Pagamento

Faça

Agrupe conteúdo relacionado em seções colapsáveis com títulos concisos.

Visão geral

Informação essencial para decisão.

Não faça

Não esconda informação crítica em accordion fechado por padrão.

Relacionados

Tabs Menu Card

Composição React

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

<Accordion defaultValue={["billing"]}>
  <AccordionItem value="billing">
    <AccordionTrigger>Faturamento</AccordionTrigger>
    <AccordionContent>Gerencie os dados de cobrança.</AccordionContent>
  </AccordionItem>
</Accordion>

Implementação

Status

Beta

Distribuição

Source via shadcn

Instalação

Configure o namespace uma única vez na integração React.

npm

npx shadcn@latest add @tis/accordion

pnpm

pnpm dlx shadcn@latest add @tis/accordion

yarn

yarn dlx shadcn@latest add @tis/accordion

bun

bunx --bun shadcn@latest add @tis/accordion

Contrato público

Item do registry

@tis/accordion

Provider

Base UI

Distribuição

Source copiado para a aplicação

Status

Beta

Arquitetura técnica

Abrir JSON do registry

Inspecionar source distribuído

Acessibilidade

Interação por teclado

Tecla	Ação
Tab	Move o foco entre triggers de Accordion e controles dentro de painéis abertos.
Enter / Space	Alterna o painel associado ao trigger focado.
Arrow Up / Arrow Down	Move o foco entre triggers do grupo.
Home / End	Move o foco para o primeiro ou último trigger do grupo.

Acessibilidade

Regra	Aplicação
button	O trigger deve ser um botão real, não um div clicável.
aria-expanded	Reflete o estado aberto/fechado no trigger.
aria-controls	Aponta para o id do painel controlado.
role="region"	Use em painéis com conteúdo suficiente para merecer landmark, sempre com aria-labelledby.
hidden	Remove painéis fechados da árvore de acessibilidade.
disabled	Remove triggers indisponíveis da interação e da ordem de tabulação.

Responsabilidade da saída

Preserve a semântica da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável