Accordion

Componentes/Overlay e disclosure

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

Diretivas standalone que preservam o DOM público e usam Angular Aria para estado, teclado e relações ARIA.

DesignUsoImplementaçãoAcessibilidade

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

Design

Preview funcional

Executado pelo componente Angular nativo com @angular/aria/accordion.

Carregando preview funcional…

Abrir playground Angular

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

Quando escolher esta saída

Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import {
  TisAccordion,
  TisAccordionItem,
  TisAccordionPanel,
  TisAccordionTitle,
  TisAccordionTrigger,
} from '@tis/angular/accordion'

Template

<div tisAccordion [multiExpandable]="false" [softDisabled]="false">
  <div tisAccordionItem>
    <button tisAccordionTrigger [panel]="panel.ariaPanel">
      <span tisAccordionTitle>Faturamento</span>
    </button>
    <div tisAccordionPanel #panel="tisAccordionPanel">
      Consulte faturas e dados fiscais.
    </div>
  </div>
</div>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/accordion

Primitive

@angular/aria/accordion

Status

Beta

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 as relações de Angular Aria e valide estado expandido, itens disabled, navegação por setas, Home/End e foco visível.

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