Accordion

Bundle size WAI-ARIA

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.

Example

Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem clita et.

"use client";

import * as Accordion from "@lora-ui/accordion";

export default function Base() {
  return (
    <Accordion.Root
      className="border-box mx-auto w-[400px] overflow-hidden rounded-xl border border-[#eaecf0] bg-[#ffffff] p-1 dark:border-[#1f242f] dark:bg-[#0c111d]"
      defaultIndexes={[0, 1]}
      mode="multiple"
    >
      <Accordion.Item
        disabled
        className="group aria-disabled:pointer-events-none"
      >
        <Accordion.Header as="div" aria-level="3">
          <Accordion.Button className="group flex w-full items-center justify-between p-4 text-sm font-semibold text-[#101828] disabled:text-[#667085] dark:text-[#f5f5f6] dark:disabled:text-[#85888e] [&_svg]:aria-[expanded=true]:rotate-180">
            Heading
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="group-disabled:text-[#85888e]"
            >
              <path
                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Accordion.Button>
        </Accordion.Header>
        <Accordion.Panel className="overflow-hidden text-sm font-normal text-[#344054] aria-[hidden=true]:hidden group-aria-disabled:text-[#667085] dark:text-[#cecfd2]">
          {({ isOpen }) => {
            return (
              isOpen && (
                <div className="p-4">
                  Sit diam sit et ea consetetur diam eirmod et sanctus. Eos
                  dolore labore lorem clita et.
                </div>
              )
            );
          }}
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item className="group aria-disabled:pointer-events-none">
        <Accordion.Header as="div" aria-level="3">
          <Accordion.Button className="group flex w-full items-center justify-between p-4 text-sm font-semibold text-[#101828] disabled:text-[#667085] dark:text-[#f5f5f6] dark:disabled:text-[#85888e] [&_svg]:aria-[expanded=true]:rotate-180">
            Heading
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="group-disabled:text-[#85888e]"
            >
              <path
                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Accordion.Button>
        </Accordion.Header>
        <Accordion.Panel className="overflow-hidden text-sm font-normal text-[#344054] aria-[hidden=true]:hidden dark:text-[#cecfd2]">
          {({ isOpen }) => {
            return (
              isOpen && (
                <div className="p-4">
                  Sit diam sit et ea consetetur diam eirmod et sanctus. Eos
                  dolore labore lorem clita et.
                </div>
              )
            );
          }}
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item className="group aria-disabled:pointer-events-none">
        <Accordion.Header as="div" aria-level="3">
          <Accordion.Button className="group flex w-full items-center justify-between p-4 text-sm font-semibold text-[#101828] disabled:text-[#667085] dark:text-[#f5f5f6] dark:disabled:text-[#85888e] [&_svg]:aria-[expanded=true]:rotate-180">
            Heading
            <svg
              width="15"
              height="15"
              viewBox="0 0 15 15"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="group-disabled:text-[#85888e]"
            >
              <path
                d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                fill="currentColor"
                fillRule="evenodd"
                clipRule="evenodd"
              />
            </svg>
          </Accordion.Button>
        </Accordion.Header>
        <Accordion.Panel className="overflow-hidden text-sm font-normal text-[#344054] aria-[hidden=true]:hidden dark:text-[#cecfd2]">
          {({ isOpen }) => {
            return (
              isOpen && (
                <div className="p-4">
                  Sit diam sit et ea consetetur diam eirmod et sanctus. Eos
                  dolore labore lorem clita et.
                </div>
              )
            );
          }}
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/accordion

API Reference

Root

Prop	Type	Default	Description
defaultIndex	Number	-1	The initial index of the expanded accordion item when mode is "single"
defaultIndexes	Number[]	[]	The initial indexes of the expanded accordion item when mode is "multiple"
mode	String	"single"	"single" \| "multiple"

Item

Prop	Type	Default	Description
disabled	Boolean	false	If true, the accordion item will be disabled.

Aria attribute	Value
[aria-disabled]	"true" \| "false"

Data attribute	Value
[data-expanded]	"true" \| "false"

Header

Prop	Type	Default	Description
as	React.ElementType	"h3"	Change the default rendered element.

Button

Prop	Type	Default	Description

Aria attribute	Value
[aria-expanded]	"true" \| "false"

Panel

Prop	Type	Default	Description
children	Function	({ isOpen: Boolean }) => {}

Aria attribute	Value
[aria-hidden]	"true" \| "false"

Keyboard

Command	Description
Space or Enter	When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
ArrowDown	If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
ArrowUp	If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.
Tab	Move focus to the next focusable element
Shift+Tab	Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.