Accordion

A vertically stacked set of interactive headings that each reveal a section of content. Perfect for organizing content in collapsible sections with smooth animations and accessibility features.

Import

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

Usage

const AccordionExample = () => {
  return (
    <Accordion type="single">
      <AccordionItem value="item-1">
        <AccordionTrigger>Page settings</AccordionTrigger>
        <AccordionContent>
          Configure your page settings including layout, theme, and display
          options.
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionTrigger>Profile Information</AccordionTrigger>
        <AccordionContent>
          Manage your profile details, avatar, and personal preferences.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};

Examples

Dynamic Selection

Allow the change of the Selection type dynamically as single or multiple using the type prop.

Value Variants

Individual accordion items can be set disabled and also as a default value

Props

Prop	Type	Default
`type?`	`'single' \| 'multiple'`	`'single'`
`defaultValue?`	`string \| string[]`	-
`value?`	`string \| string[]`	-
`onValueChange?`	`(value: string \| string[]) => void`	-
`collapsible?`	`boolean`	`false`
`disabled?`	`boolean`	`false`
`dir?`	`'ltr' \| 'rtl'`	`ltr`
`css?`	`object`	-

AccordionItem

Prop	Type	Default
`value?`	`string`	-
`disabled?`	`boolean`	`false`

Data Attributes

These props are used for the conditional rendering of the components

Applicable - Accordion

Prop	Type	Default
`[data-orientation]?`	`'vertical' \| 'horizontal'`	-

Applicable - AccordionItem/ AccordionContent/ AccordionTrigger

Prop	Type	Default
`[data-state]?`	`'open' \| 'closed'`	-
`[data-disabled]?`	`boolean`	-
`[data-orientation]?`	`'vertical' \| 'horizontal'`	-

Accordion

On this page