Accordion
Collapsible content sections for FAQs, settings panels, and any grouped information that benefits from progressive disclosure.
Zyra UI is a modern Angular component library built with signals.
Yes, fully open source under the MIT licence.
Absolutely — it ships with full Angular SSR support out of the box.
API
All inputs and configuration options for zyra-accordion.
| Prop | Type | Default | Description |
|---|---|---|---|
allowMultiple | boolean | false | Allow multiple items open simultaneously |
title (on item) | string | - | Trigger text for each accordion item |
expanded (on item) | boolean | false | Initial open state of an item |
disabled (on item) | boolean | false | Prevents an item from being opened |
Tokens
CSS custom properties zyra-accordion reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Border--zyra-color-border-color | var(--zyra-color-border) | Outer border of the accordion, and the divider between items. |
Background--zyra-color-background-elevated | var(--zyra-color-bg-panel) | Fill color of the accordion container. |
Header text--zyra-color-foreground | var(--zyra-color-text) | Text color of an item header, resting and expanded. |
Header icon (expanded)--zyra-color-primary | var(--zyra-color-accent) | Chevron color when the item is expanded, and the focus outline color. |
Body text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Text color of the collapsible content and the header subtitle. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Accordion headers use role="button" with aria-expanded for open/closed state
- Content panels are linked to their headers via aria-controls / aria-labelledby
- Keyboard: Enter/Space toggles item; Tab moves to next focusable element
- Animation uses CSS grid — respects prefers-reduced-motion