Documentation
Accordion

Accordion

Bundle size
5.2 KB
1.0.6

A series of interactive titles stacked on top of each other, each one revealing a section of content.

Installation

pnpm add @inpulse-ds/accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ds/accordion';
return (
    <Accordion>
      <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 unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );

Examples

Allow to close items

Use the collapsible prop to allow all items to be collapsed.

Multiple items open at once

Set the type property to multiple to allow opening multiple items at the same time.

Expanded by default

Use the defaultValue property to define which items should be expanded by default.

Yes. It's unstyled by default, giving you freedom over the look and feel.

Ignore the underline

Through the useUnderline prop, it is possible to remove the underline from the trigger.