Ark Logo
Reat
Components
Accordion

Accordion

A collapsible component for displaying content in a vertical stack.

Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice cream bonbon jelly. Jelly topping tiramisu halvah lollipop.

Features

  • Full keyboard navigation
  • Supports horizontal and vertical orientation
  • Right-to-Left (RTL) support
  • Single or multiple item expansion
  • Controlled and uncontrolled modes
  • Collapse each accordion item

Anatomy

To set up the accordion correctly, it's essential to understand its anatomy and the naming of its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Default Expanded State

Set the defaultValue prop to specify which item should be expanded by default.

Collapsible

Use the collapsible prop to allow the user to collapse all panels.

Multiple Panels

Use the multiple prop to allow multiple panels to be expanded simultaneously.

Horizontal Orientation

By default, the Accordion is oriented vertically. Use the orientation prop to switch to a horizontal layout.

Animate Content Size

Use the --height and/or --width CSS variables to animate the size of the content when it expands or closes:

@keyframes slideDown {
  from {
    opacity: 0.01;
    height: 0;
  }
  to {
    opacity: 1;
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    height: var(--height);
  }
  to {
    opacity: 0.01;
    height: 0;
  }
}

[data-scope="accordion"][data-part="item-content"][data-state="open"] {
  animation: slideDown 250ms ease-in-out;
}

[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
  animation: slideUp 200ms ease-in-out;
}

API Reference

Accessibility

This component complies with the Accordion WAI-ARIA design pattern.

Keyboard Support

KeyDescription
Space
When focus is on an trigger of a collapsed item, the item is expanded
Enter
When focus is on an trigger of a collapsed section, expands the section.
Tab
Moves focus to the next focusable element
Shift + Tab
Moves focus to the previous focusable element
ArrowDown
Moves focus to the next trigger
ArrowUp
Moves focus to the previous trigger.
Home
When focus is on an trigger, moves focus to the first trigger.
End
When focus is on an trigger, moves focus to the last trigger.