Principles
Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out Getting Started

Accordions are used to toggle the visibility of content. They are used in the sidebar, and in the chat.

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

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

const AccordionExample = () => ( 
  <div style={{ width: "400px" }}>
    <Accordion items={items} />
  </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>
    )
}
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]