Accordion

Components/Overlay and disclosure

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Standalone directives that preserve the public DOM and use Angular Aria for state, keyboard behavior, and ARIA relationships.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and @angular/aria/accordion.

Loading functional preview…

Open the Angular playground

Anatomy

Configurações avançadas

Conteúdo expandido do painel.

1 2 3 4 5 6

1 .ds-accordion — group of related items.
2 .ds-accordion__item — visual container for each section.
3 .ds-accordion__trigger — button that toggles aria-expanded.
4 .ds-accordion__leading-icon — optional Lucide icon.
5 .ds-accordion__chevron — visual indicator for open/closed state.
6 .ds-accordion__panel — content slot associated with the trigger.

Default

Use a button for the trigger. The documentation helper synchronizes aria-expanded, hidden, and data-state; in product, keep the same contract.

Billing details

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

Security settings

Custom content

The panel is a slot. Compose complex content with public DS components instead of isolated internal classes.

Plano atual

Team Pro

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

Alterar plano

Disabled

Configuração bloqueada

Figma API

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.

Property	Type	Repo equivalent
Title	TEXT	.ds-accordion__title
Content	TEXT	.ds-accordion__panel com texto simples
Content Slot	SLOT	Custom content inside .ds-accordion__panel.
Show Leading Icon	BOOLEAN	Render or omit .ds-accordion__leading-icon.
Leading Icon	INSTANCE_SWAP	Lucide icon with data-lucide.
State	VARIANT	Default, Hover, Focus, Disabled
Open	VARIANT	aria-expanded, hidden e data-state

Token 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.*

Usage

When to use

Use Accordion when

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.

Don't use Accordion when

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.

Best practices

Entrega

Endereço e janela de recebimento.

Pagamento

Faça

Group related content in collapsible sections with concise titles.

Visão geral

Informação essencial para decisão.

Não faça

Don't hide critical information in a closed accordion by default.

Related

Tabs Menu Card

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

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

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

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>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/accordion

Primitive

@angular/aria/accordion

Status

Beta

Accessibility

Keyboard interaction

Key	Action
Tab	Moves focus between Accordion triggers and controls inside open panels.
Enter / Space	Toggles the panel associated with the focused trigger.
Arrow Up / Arrow Down	Moves focus between group triggers.
Home / End	Moves focus to the first or last trigger in the group.

Accessibility

Rule	Application
button	The trigger must be a real button, not a clickable div.
aria-expanded	Reflects the open/closed state on the trigger.
aria-controls	Points to the controlled panel id.
role="region"	Use on panels with enough content to merit a landmark, always with aria-labelledby.
hidden	Removes closed panels from the accessibility tree.
disabled	Removes unavailable triggers from interaction and the tab order.

Output responsibility

Preserve Angular Aria relationships and validate expanded state, disabled items, arrow navigation, Home/End, and visible focus.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference