Star4
Back to components

Accordion

zyra-accordion

Collapsible content sections for FAQs, settings panels, and any grouped information that benefits from progressive disclosure.

Component preview

Explore the available states and the real library behavior for this component.

zyra-accordion Playground

Control every input live and see the result instantly

Controls
boolean inputs
Preview
Zyra UI is a modern Angular component library built with signals-first design and full accessibility support.
Run npm install zyra-ng-ui and add provideZyra() to your app config.
Yes, Zyra UI is fully open source and available under the MIT license.
Generated Code
<zyra-accordion
>
  <zyra-accordion-item title="What is Zyra UI?">
    Zyra UI is a modern Angular component library.
  </zyra-accordion-item>
  <zyra-accordion-item title="Is it free?">
    Yes, fully open source under MIT.
  </zyra-accordion-item>
</zyra-accordion>
FAQ Pattern
Zyra UI is built exclusively for Angular 17+ and uses standalone components, signals, and modern Angular APIs throughout.
Yes. Zyra UI ships with light and dark themes out of the box, powered by CSS custom properties and the built-in theme service.
Absolutely. Override any --zyr-* CSS variable in your global styles to match your brand palette.
Yes. Every component follows ARIA patterns — accordion triggers respond to Enter and Space keys, with visible focus indicators.
Allow Multiple Open
Manage how you receive notifications from the platform — email, push, or in-app.
Control your data visibility and choose who can see your profile and activity.
Connect external tools like GitHub, Slack, and Figma to streamline your workflow.
Real World Examples
Billing FAQ
Go to Settings → Billing and click Cancel plan. You'll keep access until the billing period ends.
Refunds are available within 14 days of purchase. Contact support with your order ID.
We accept Visa, Mastercard, and PayPal.
Settings Panel
Update your name, email, and profile photo in this section.
Change your password, enable 2FA, and review active sessions.
Choose which events trigger email or push notifications.

Copy-paste example

Drop this into your Angular standalone component and it works out of the box.

accordion.demo.ts
import { Component } from '@angular/core';
import { ZyraAccordion, ZyraAccordionItem } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [ZyraAccordion, ZyraAccordionItem],
  template: `
    <zyra-accordion>
      <zyra-accordion-item title="What is Zyra UI?">
        A modern Angular component library built with signals.
      </zyra-accordion-item>
      <zyra-accordion-item title="Is it free?">
        Yes, fully open source under MIT.
      </zyra-accordion-item>
    </zyra-accordion>
  `,
})
export class DemoComponent {}

Variants

All the visual modes and states available for this component.

single

Only one item can be open at a time

multiple

Multiple items can be expanded simultaneously

API

All inputs and configuration options for zyra-accordion.

PropTypeDefaultDescription
multiplebooleanfalseAllow multiple items open simultaneously
title (on item)string-Trigger text for each accordion item
expanded (on item)booleanfalseInitial open state of an item
disabled (on item)booleanfalsePrevents 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

Related components

Components that pair well with Accordion in real UI patterns.

CardLayout→DividerLayout→ModalOverlays→