Accordion

A vertically stacked set of interactive headings that reveal or hide associated content.

Import

tsx

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tac-ui/web';

Playground

Interactively configure the Accordion props below.

Yes. It adheres to the WAI-ARIA design pattern.

Variant

tsx

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger value="item-1">Is it accessible?</AccordionTrigger>
    <AccordionContent value="item-1">Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger value="item-2">Is it styled?</AccordionTrigger>
    <AccordionContent value="item-2">Yes. It comes with default styles that match the design system.</AccordionContent>
  </AccordionItem>
</Accordion>

Single (one open at a time)

In single mode only one item can be open at a time; opening a new item collapses the previously open one. Use <code>defaultValue</code> to set the initially open item.

Yes. It adheres to the WAI-ARIA design pattern.

tsx

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger value="item-1">Is it accessible?</AccordionTrigger>
    <AccordionContent value="item-1">Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger value="item-2">Is it styled?</AccordionTrigger>
    <AccordionContent value="item-2">Yes. It comes with default styles that match the design system.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger value="item-3">Is it animated?</AccordionTrigger>
    <AccordionContent value="item-3">Yes. It uses spring animations for smooth open and close transitions.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple (many open at once)

In multiple mode, any number of items can be open simultaneously. Pass an array of values to <code>defaultValue</code> to pre-open multiple items.

Content for the first item.

Content for the second item.

tsx

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger value="item-1">First item</AccordionTrigger>
    <AccordionContent value="item-1">Content for the first item.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger value="item-2">Second item</AccordionTrigger>
    <AccordionContent value="item-2">Content for the second item.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger value="item-3">Third item</AccordionTrigger>
    <AccordionContent value="item-3">Content for the third item.</AccordionContent>
  </AccordionItem>
</Accordion>

Glass

The <code>glass</code> prop applies a glassmorphism backdrop blur to the accordion container and each item, suitable for overlaying rich backgrounds.

A design style using frosted-glass effects with blur and transparency.

tsx

<Accordion type="single" glass defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger value="item-1">What is glassmorphism?</AccordionTrigger>
    <AccordionContent value="item-1">A design style using frosted-glass effects with blur and transparency.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger value="item-2">When should I use it?</AccordionTrigger>
    <AccordionContent value="item-2">Use glass when the accordion sits on a colorful or image background.</AccordionContent>
  </AccordionItem>
</Accordion>

Without Outline

Setting <code>outline={`{false}`}</code> removes the bordered card style and renders items with only a bottom divider, creating a flush list appearance.

Items are separated by a bottom border instead of individual card borders.

tsx

<Accordion type="single" outline={false} defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger value="item-1">No border card style</AccordionTrigger>
    <AccordionContent value="item-1">Items are separated by a bottom border instead of individual card borders.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger value="item-2">Flush appearance</AccordionTrigger>
    <AccordionContent value="item-2">Use this style when the accordion is embedded in a surface that already has a border.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger value="item-3">Third item</AccordionTrigger>
    <AccordionContent value="item-3">The last item&apos;s bottom border is hidden automatically.</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion uses a composition pattern. The root manages state; AccordionItem, AccordionTrigger, and AccordionContent all require a matching <code>value</code> prop to wire up open/close behavior.

Accordion props:

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Whether only one or multiple items can be open at a time.
defaultValue	string \| string[]	[]	The value(s) of items open by default (uncontrolled).
glass	boolean	false	Applies glassmorphism backdrop blur to the container and each item.
outline	boolean	true	When true, shows individual card borders. When false, uses a flush bottom-divider style.
className	string	-	Additional CSS class names.

AccordionItem props:

Prop	Type	Default	Description
value	string	-	Unique identifier for this accordion item; used to control open state.
className	string	-	Additional CSS class names.

AccordionTrigger props:

Prop	Type	Default	Description
value	string	-	The accordion item value this trigger controls.
children	React.ReactNode	-	Label text displayed in the trigger button.
className	string	-	Additional CSS class names.

AccordionContent props:

Prop	Type	Default	Description
value	string	-	The accordion item value that controls visibility of this content.
children	React.ReactNode	-	Content revealed when the accordion item is open.
className	string	-	Additional CSS class names.