Accordion

Display content in a vertically stacked set of panels.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Accordion Parts

import { 
  Accordion, 
  AccordionItem, 
  AccordionHeader, 
  AccordionTrigger, 
  AccordionPanel 
} from 'components/selia/accordion';

Structure

The expected structure and composition of the component.

Anatomy

<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>
        Accordion Trigger
      </AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>
      Accordion content
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Props

Each component part, its responsibility, and the props it exposes.

<AccordionTrigger>

Base behavior is provided by Base UI Accordion. Refer to its documentation for the full API.

Name

Default

Options

`expandableIndicator`

`true`

`true``false`