🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Accordion

A vertically stacked set of expandable panels, each containing a header and an associated content area.

Accordions allow users to view a summary or condensed version of content and then expand it to reveal detailed information. They are typically used when screen real estate is limited and there's a need to manage the visibility of large amounts of content, presenting information in a structured, efficient way that allows users to access details on demand.

Built on top of Radix UI's Accordion primitive with full keyboard navigation and accessibility support.

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 extend Radix UI primitives. See the Radix UI documentation for all available 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.

Component Slots

The following data attributes are used to identify component parts:

accordion
accordion-content
accordion-item
accordion-trigger

Additional Classes

Other CSS classes used by this component:

accordion-content
accordion-content-inner
accordion-header
accordion-icon
accordion-item
accordion-trigger

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI accordion Documentation

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 Component Slots Additional Classes Accessibility Resources

Contribute