Accordion - rafty/ui Docs

The accordion component allows the user to show and hide sections of related content on a page.

This component is made on top of Radix UIs Accordion Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@rafty/ui";

<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>;

Usage

In Accordion parent element, type prop is mandatory as it decides whether a single item or multiple items can be expanded/collapsed at a same time.

<Accordion type="single">
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Collapsible

when using type single, the collapsible prop allows closing content when clicking trigger for an open item otherwise one accordion item remains open by default.

<Accordion
  collapsible
  type="single"
>
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Expand Multiple items at once

If you set type multiple then the accordion will permit multiple items to be expanded at once.
when using type multiple value and default value are string [] and onValueChange function is like (value: string []) => void

<Accordion type="multiple">
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Expand Item With DefaultValue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<Accordion
  defaultValue="1"
  type="single"
>
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Size

There are 3 size options in accordion: sm, md (default) & lg.

<Accordion
  size="sm"
  type="single"
  variant="ghost"
>
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Variant

There are 2 variant options in accordion: solid (default) & ghost.

<Accordion
  type="single"
  variant="ghost"
>
  <AccordionItem value="1">
    <AccordionTrigger>
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Barebone

Pass isBarebone prop to remove all style in accordion.

<Accordion
  className="w-full space-y-2"
  collapsible
  isBarebone
  type="single"
>
  <AccordionItem
    className="dark:bg-secondary-800 rounded-lg bg-white p-2 px-4 shadow-md dark:text-white"
    value="1"
  >
    <AccordionTrigger className="flex w-full items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180">
      Section 1 title
    </AccordionTrigger>
    <AccordionContent className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem
    className="dark:bg-secondary-800 rounded-lg bg-white p-2 px-4 shadow-md dark:text-white"
    value="2"
  >
    <AccordionTrigger className="flex w-full items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180">
      Section 2 title
    </AccordionTrigger>
    <AccordionContent className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden transition-all">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Unstyled

Pass isUnstyled prop to remove style from a particular sub component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<Accordion
  collapsible
  defaultValue="1"
  type="single"
>
  <AccordionItem
    className="dark:bg-secondary-800 rounded-lg bg-white p-2 px-4 dark:text-white"
    value="1"
  >
    <AccordionTrigger
      className="flex w-full items-center justify-between font-medium transition-all [&[data-state=open]>svg]:rotate-180"
      isUnstyled
    >
      Section 1 title
    </AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="2">
    <AccordionTrigger>
      Section 2 title
    </AccordionTrigger>
    <AccordionContent isUnstyled>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    </AccordionContent>
  </AccordionItem>
</Accordion>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Trigger

AccordionTriggercomposes Button component

Property	Description	Type	Default
isUnstyled	Removes Style from a particular subcomponent	`boolean`	-

Content

Property	Description	Type	Default
isUnstyled	Removes Style from a particular subcomponent	`boolean`	-