Accordion

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

Accordions help organize content into scannable, collapsible sections that users can expand to view more details. They're particularly useful for FAQs, settings panels, and any interface where showing all content at once would be overwhelming. Accordions support both single-panel and multi-panel expansion modes, allowing designers to control whether multiple sections can be open simultaneously or if opening one section should close others.

Use accordions to progressively disclose information and reduce cognitive load by hiding secondary content until users need it. Each accordion item should have a clear, descriptive header that gives users enough information to decide whether to expand it. Accordions should be used sparingly on mobile devices where space is limited, as excessive nesting can make content harder to access.

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>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Accordion
AccordionItem
AccordionTrigger
AccordionContent

Props

All components accept standard HTML attributes and React props.

Examples

"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>
  )
}

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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

accordion
accordion-content
accordion-item
accordion-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Moving Away from Telerik UI for Blazor Alert Dialog

On This Page

Example Installation Components Props Examples Collapsible Default Expanded Disabled Multiple Default Expanded Multiple Styling Classes Accessibility

Contribute