Ritro UI logo

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Installation

npm install @ritro-ui/react@1.2.0

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@ritro-ui/react"

Usage

Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that match the other components.
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the other components.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Component
Prop
Type
Description
Accordion
type
string
Type of accordion (single or multiple)
Accordion
collapsible
boolean
Whether accordion items can be collapsed
AccordionItem
value
string
Unique identifier for the item

Examples

Multiple Items Open

Content for item 1
Content for item 2
<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>Item 1</AccordionTrigger>
    <AccordionContent>Content for item 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Item 2</AccordionTrigger>
    <AccordionContent>Content for item 2</AccordionContent>
  </AccordionItem>
</Accordion>