Team Pro
Até 25 usuários, billing mensal e permissões avançadas.
Accordion
Componente para revelar ou ocultar seções de conteúdo relacionadas sem trocar de página. O trigger controla um painel por vez e mantém a estrutura semântica explícita.Component for revealing or hiding related content sections without changing pages. The trigger controls a panel and keeps the semantic structure explicit.
Quando usarWhen to use
Use Accordion quandoUse Accordion when
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.Users need to compare or explore related sections, such as FAQs, grouped settings, progressive details, or secondary content that does not need to be fully visible at once.
Não use Accordion quandoDon't use Accordion when
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.Navigation switches primary views (use Tabs), the content is a command menu (use Menu/Action Menu), or the information must stay visible for decision making.
AnatomiaAnatomy
Conteúdo expandido do painel.
1
2
3
4
5
6
.ds-accordion — grupo de itens relacionados..ds-accordion — group of related items.2
.ds-accordion__item — container visual de cada seção..ds-accordion__item — visual container for each section.3
.ds-accordion__trigger — botão que alterna aria-expanded..ds-accordion__trigger — button that toggles aria-expanded.4
.ds-accordion__leading-icon — ícone Lucide opcional..ds-accordion__leading-icon — optional Lucide icon.5
.ds-accordion__chevron — indicador visual do estado aberto/fechado..ds-accordion__chevron — visual indicator for open/closed state.6
.ds-accordion__panel — slot de conteúdo associado ao trigger..ds-accordion__panel — content slot associated with the trigger.
PadrãoDefault
Use um button para o trigger. O helper da documentação sincroniza aria-expanded, hidden e data-state; em produto, mantenha esse mesmo contrato.Use a button for the trigger. The documentation helper synchronizes aria-expanded, hidden, and data-state; in product, keep the same contract.
Invoices are generated on the first business day of each month and sent to account owners.
Admins can enforce two-factor authentication and session expiration policies.
<div class="ds-accordion" data-accordion-mode="single">
<div class="ds-accordion__item" data-state="open">
<button class="ds-accordion__trigger"
type="button"
id="billing-trigger"
aria-expanded="true"
aria-controls="billing-panel">
<i data-lucide="credit-card" class="ds-accordion__leading-icon ds-icon" aria-hidden="true"></i>
<span class="ds-accordion__title">Billing details</span>
<i data-lucide="chevron-down" class="ds-accordion__chevron ds-icon" aria-hidden="true"></i>
</button>
<div class="ds-accordion__panel"
id="billing-panel"
role="region"
aria-labelledby="billing-trigger">
<p>Invoices are generated on the first business day of each month.</p>
</div>
</div>
<div class="ds-accordion__item" data-state="closed">
<button class="ds-accordion__trigger"
type="button"
id="security-trigger"
aria-expanded="false"
aria-controls="security-panel">
<i data-lucide="shield-check" class="ds-accordion__leading-icon ds-icon" aria-hidden="true"></i>
<span class="ds-accordion__title">Security settings</span>
<i data-lucide="chevron-down" class="ds-accordion__chevron ds-icon" aria-hidden="true"></i>
</button>
<div class="ds-accordion__panel"
id="security-panel"
role="region"
aria-labelledby="security-trigger"
hidden>
<p>Admins can enforce two-factor authentication policies.</p>
</div>
</div>
</div>Conteúdo customizadoCustom content
O painel é um slot. Componha conteúdo complexo com componentes públicos do DS, sem usar classes internas isoladas.The panel is a slot. Compose complex content with public DS components instead of isolated internal classes.
DisabledDisabled
Este painel fica indisponível até que a permissão seja liberada.
Boas práticasBest practices
Endereço e janela de recebimento.
Cartão e faturamento.
Faça
Agrupe conteúdo relacionado em seções colapsáveis com títulos concisos.Group related content in collapsible sections with concise titles.
Informação essencial para decisão.
Não faça
Não esconda informação crítica em accordion fechado por padrão.Don't hide critical information in a closed accordion by default.
API no FigmaFigma API
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.The live component set exposes Title, not Label. Use the public Figma property name for handoff and documentation; the CSS class remains .ds-accordion__title.
| PropriedadeProperty | TipoType | Equivalente no repoRepo equivalent |
|---|---|---|
Title | TEXT | .ds-accordion__title |
Content | TEXT | .ds-accordion__panel com texto simples |
Content Slot | SLOT | Conteúdo customizado dentro de .ds-accordion__panel.Custom content inside .ds-accordion__panel. |
Show Leading Icon | BOOLEAN | Renderizar ou omitir .ds-accordion__leading-icon.Render or omit .ds-accordion__leading-icon. |
Leading Icon | INSTANCE_SWAP | Ícone Lucide com data-lucide.Lucide icon with data-lucide. |
State | VARIANT | Default, Hover, Focus, Disabled |
Open | VARIANT | aria-expanded, hidden e data-state |
ComportamentoBehavior
| ContratoContract | RegraRule |
|---|---|
aria-expanded | Fonte de estado no trigger; true abre o painel associado.State source on the trigger; true opens the associated panel. |
hidden | Deve estar presente em painéis fechados e ausente em painéis abertos.Must be present on closed panels and absent on open panels. |
data-state | Espelha open/closed no item para CSS, testes e debugging.Mirrors open/closed on the item for CSS, tests, and debugging. |
data-accordion-mode="single" | Opcional. Fecha os irmãos quando um item abre, alinhando padrões como Radix Accordion single.Optional. Closes siblings when one item opens, matching patterns such as Radix Accordion single. |
Classes CSSCSS classes
| ClasseClass | DescriçãoDescription |
|---|---|
ds-accordion | Container do grupo de itens.Container for the item group. |
ds-accordion__item | Container visual de uma seção.Visual container for one section. |
ds-accordion__item--disabled | Item desabilitado — trigger com disabled.Disabled item — trigger with disabled. |
ds-accordion__trigger | Botão que alterna abertura do painel.Button that toggles panel visibility. |
ds-accordion__leading-icon | Ícone Lucide opcional antes do título.Optional Lucide icon before the title. |
ds-accordion__title | Texto do trigger.Trigger text. |
ds-accordion__chevron | Indicador decorativo do estado.Decorative state indicator. |
ds-accordion__panel | Slot de conteúdo expandido.Expanded content slot. |
data-state | Estado sincronizado no item: open ou closed.Synchronized item state: open or closed. |
Interação por tecladoKeyboard interaction
| TeclaKey | AçãoAction |
|---|---|
Tab | Move o foco entre triggers de Accordion e controles dentro de painéis abertos.Moves focus between Accordion triggers and controls inside open panels. |
Enter / Space | Alterna o painel associado ao trigger focado.Toggles the panel associated with the focused trigger. |
Arrow Up / Arrow Down | Move o foco entre triggers do grupo.Moves focus between group triggers. |
Home / End | Move o foco para o primeiro ou último trigger do grupo.Moves focus to the first or last trigger in the group. |
AcessibilidadeAccessibility
| RegraRule | AplicaçãoApplication |
|---|---|
button | O trigger deve ser um botão real, não um div clicável.The trigger must be a real button, not a clickable div. |
aria-expanded | Reflete o estado aberto/fechado no trigger.Reflects the open/closed state on the trigger. |
aria-controls | Aponta para o id do painel controlado.Points to the controlled panel id. |
role="region" | Use em painéis com conteúdo suficiente para merecer landmark, sempre com aria-labelledby.Use on panels with enough content to merit a landmark, always with aria-labelledby. |
hidden | Remove painéis fechados da árvore de acessibilidade.Removes closed panels from the accessibility tree. |
disabled | Remove triggers indisponíveis da interação e da ordem de tabulação.Removes unavailable triggers from interaction and the tab order. |
Mapeamento de tokensToken mapping
| 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.* |
Runtime obrigatórioRequired runtime
O CSS define anatomia e estados visuais, mas expand/collapse, teclado e modo single dependem do módulo público ds-tis/accordion (initAccordions / destroyAccordions). Eventos: ds-accordion-open, ds-accordion-close. Chame destroyAccordions ao desmontar.CSS defines anatomy and visual states, but expand/collapse, keyboard, and single mode depend on the public ds-tis/accordion module (initAccordions / destroyAccordions). Events: ds-accordion-open, ds-accordion-close. Call destroyAccordions on unmount.
<script type="module">
import { initAccordions, destroyAccordions } from 'ds-tis/accordion';
initAccordions();
// destroyAccordions() ao desmontar a view
</script>