Accordion

InstallationCopy Anchor Link

npx vayu-ui-cli@latest add accordion

UsageCopy Anchor Link

AnatomyCopy Anchor Link

import { Accordion } from 'vayu-ui';

<Accordion aria-labelledby="your-label">
  <Accordion.Item itemId="unique-id">
    <Accordion.Header itemId="unique-id">Section Title</Accordion.Header>
    <Accordion.Body itemId="unique-id">Section content goes here.</Accordion.Body>
  </Accordion.Item>
</Accordion>;

• Accordion — Root container. Manages open/close state and provides context to children.
• Accordion.Item — Wrapper for a single accordion section. Registers the item for keyboard navigation.
• Accordion.Header — Clickable button trigger. Displays the section title with a chevron indicator.
• Accordion.Body — Collapsible content panel with smooth height animation.

AccessibilityCopy Anchor Link

• Keyboard Support:
  • Enter / Space — Toggle the focused section open or closed.
  • ArrowDown — Move focus to the next header.
  • ArrowUp — Move focus to the previous header.
  • Home — Move focus to the first header.
  • End — Move focus to the last header.
  • Escape — Close the currently open section.
• ARIA Attributes:
  • aria-expanded on Accordion.Header reflects the open/closed state.
  • aria-controls on Accordion.Header links to the associated panel.
  • aria-labelledby on Accordion.Body references the controlling header.
  • aria-hidden on Accordion.Body prevents hidden content from being read.
  • Chevron icon is marked aria-hidden="true".
• Focus Behavior:
  • Focus moves to the first focusable element inside the panel when a section expands.
  • When a section collapses, focus returns to its header button if the panel had focus.

Screen reader behaviorCopy Anchor Link

When a user navigates to an accordion header, the screen reader announces the button text, its expanded or collapsed state (via aria-expanded), and the number of items in the accordion group. When a section is expanded, the panel content is announced (the panel has role="region" with aria-labelledby linking back to the header). When collapsed, the panel content is hidden from the assistive technology tree (aria-hidden="true"). Users can navigate between headers using arrow keys, and the screen reader will announce each header as it receives focus.

Component Folder StructureCopy Anchor Link

Accordion/
├── Accordion.tsx        # Root component with context provider and state management
├── AccordionItem.tsx    # Item container with registration for keyboard navigation
├── AccordionHeader.tsx  # Clickable header trigger with keyboard navigation
├── AccordionBody.tsx    # Collapsible panel with animated height transitions
├── types.ts             # TypeScript type definitions
├── index.ts             # Re-exports all components and types
└── README.md            # Component usage reference

PropsCopy Anchor Link

Accordion (Root)Copy Anchor Link

Accordion.ItemCopy Anchor Link

Accordion.HeaderCopy Anchor Link

Accordion.BodyCopy Anchor Link