Accordions are a common UX pattern that can help reduce the amount of information presented to users. They are used to toggle the visibility of content, condensing information and reducing clutter.

"use client"
import Accordion from "@radui/ui/Accordion";

const items = [
  {
    id: "react",
    title: "React",
    content: "React is a JavaScript library for building user interfaces."
  },
  {
    id: "angular",
    title: "Angular",
    content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript."
  },
  {
    id: "vue",
    title: "Vue",
    content: "Vue.js is a progressive framework for building user interfaces."
  }
]

const AccordionExample = () => {


  return (
  <div className="w-64 md:w-96">
    <Accordion.Root>
      {items.map((item) => (
        <Accordion.Item key={item.id} value={item.id}>
          <Accordion.Header>
            <Accordion.Trigger>{item.title}</Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content>{item.content}</Accordion.Content>
        </Accordion.Item>
      ))}
    </Accordion.Root>
  </div>)
}

export default AccordionExample;

Import all parts of the component and piece them together

import Accordion from "@radui/ui/Accordion";

export default () => {
    return (
        <Accordion.Root>
            <Accordion.Item>
                <Accordion.Header>
                    <Accordion.Trigger />
                </Accordion.Header>
                <Accordion.Content />
            </Accordion.Item>
        </Accordion.Root>
    )
}

The root component for the Accordion.

PropTypeDefault

className

string--

openMultiple

boolean

false

asChild

boolean

false

loop

boolean

true

orientation

enum

horizontal

disableTabIndexing

boolean

true

The item component for the Accordion.

PropTypeDefault

className

string--

asChild

boolean

false

disabled

boolean

false

value*

string--

The trigger component for the Accordion. This component is used to toggle the visibility of the AccordionItem.

PropTypeDefault

className

string--

asChild

boolean

false

ShortcutDescription
Space

When focus is on an Accordion.Trigger of a collapsed section, expands the section.

Enter

When focus is on an Accordion.Trigger of an expanded section, collapses the section.

Tab

When focus is on an Accordion.Trigger of a collapsed section, focuses the next Accordion.Trigger.

Shift + Tab

When focus is on an Accordion.Trigger of an expanded section, focuses the previous Accordion.Trigger.

ArrowDown

When focus is on an Accordion.Trigger of a collapsed section, focuses the next Accordion.Trigger.

ArrowUp

When focus is on an Accordion.Trigger of an expanded section, focuses the previous Accordion.Trigger.

Home

When focus is on an Accordion.Trigger, focuses the first Accordion.Trigger. [TODO]

End

When focus is on an Accordion.Trigger, focuses the last Accordion.Trigger. [TODO]

Edit this page on GitHub