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 |
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