Skip to main content

Accordion

Import

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@sparrowengg/twigs-react";

Usage

Result
Loading...
<Accordion type="single">
  <AccordionItem value="item-1">
    <AccordionTrigger>Page settings</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item-2">
    <AccordionTrigger>Profile Information</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

PropertyDescriptionTypeDefault
typeability to open one or more accordionsingle multiplesingle
sizesm mdsm
defaultValueuncontrolled default selected accorion itembooleanfalse
valuecontrolled selected accordion itemboolean
onValueChangecallback function for state changes

AccordionItem

PropertyDescriptionTypeDefault
valueidentifier for itemsingle,multiplesingle