Accordion

since 1.0

Accordion is a vertically stacked set of collapsible sections that reveal content when expanded.

Example

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionDefault() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <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 styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other components
          aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It&apos;s animated by default, but you can disable it if you
          prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Install

import { Accordion } from "@strongtie/design-system/accordion"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Accordion
AccordionItem
AccordionTrigger
AccordionContent

Props

All components accept standard HTML attributes and React props.

Examples

Collapsible

Yes. With collapsible enabled, you can click the trigger again to close this item.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionCollapsible() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="w-full"
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>Can I close this item?</AccordionTrigger>
        <AccordionContent>
          Yes. With collapsible enabled, you can click the trigger again to
          close this item.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How does collapsible work?</AccordionTrigger>
        <AccordionContent>
          When collapsible is true, clicking an open item&apos;s trigger will
          close it, allowing all items to be closed at once.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>What&apos;s the difference?</AccordionTrigger>
        <AccordionContent>
          Without collapsible, one item must always remain open in single mode.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Default Expanded

The accordion is initialized with this item expanded using the defaultValue prop.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionDefaultExpanded() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="w-full"
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>This item is open by default</AccordionTrigger>
        <AccordionContent>
          The accordion is initialized with this item expanded using the
          defaultValue prop.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>This item is closed by default</AccordionTrigger>
        <AccordionContent>
          You can click to expand this item, which will close the first item.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Also closed by default</AccordionTrigger>
        <AccordionContent>
          Use defaultValue to control which item is initially expanded.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Disabled

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionDisabled() {
  return (
    <Accordion type="single" collapsible className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Regular item</AccordionTrigger>
        <AccordionContent>
          This is a regular accordion item that can be opened/closed.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Disabled item</AccordionTrigger>
        <AccordionContent>
          This item is disabled and cannot be opened/closed.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Another regular item</AccordionTrigger>
        <AccordionContent>
          This item can be interacted with normally.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Multiple Default Expanded

This item is expanded by default because its value is included in the defaultValue array.

Multiple items can be open simultaneously with type="multiple". Both this and the first item are open on load.

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionMultipleDefaultExpanded() {
  return (
    <Accordion
      type="multiple"
      defaultValue={["item-1", "item-2"]}
      className="w-full"
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>First item - Open by default</AccordionTrigger>
        <AccordionContent>
          This item is expanded by default because its value is included in the
          defaultValue array.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Second item - Also open by default</AccordionTrigger>
        <AccordionContent>
          Multiple items can be open simultaneously with
          type=&quot;multiple&quot;. Both this and the first item are open on
          load.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Third item - Closed by default</AccordionTrigger>
        <AccordionContent>
          This item is closed initially because it&apos;s not in the
          defaultValue array.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Multiple

"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@strongtie/design-system/accordion"

export function AccordionMultiple() {
  return (
    <Accordion type="multiple" className="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Can multiple items be open?</AccordionTrigger>
        <AccordionContent>
          Yes! With type=&quot;multiple&quot;, you can have multiple accordion
          items open at the same time.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How is this different from single?</AccordionTrigger>
        <AccordionContent>
          Unlike type=&quot;single&quot;, opening a new item won&apos;t
          automatically close the previously opened item.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Try opening all items</AccordionTrigger>
        <AccordionContent>
          You can open all three items simultaneously. Each item can be toggled
          independently.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Components Alert Dialog

On This Page

Example Install Components Props Examples Collapsible Default Expanded Disabled Multiple Default Expanded Multiple

Contribute