Accordion

The Accordion component displays collapsible content panels for presenting information in a limited space.

Usage

<script>
  import { 
    Accordion,
    AccordionItem,
    AccordionTrigger,
    AccordionContent
  } from "$lib/components/ui/accordion";
</script>

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Default

A basic accordion with multiple items.

Multiple

An accordion that allows multiple items to be open at the same time.

Custom Styling

An accordion with custom styling for the trigger and content.

API Reference

Accordion

The main container component for the accordion.

Property	Type	Default	Description
`type`	`"single" \\| "multiple"`	`"single"`	Determines whether one or multiple items can be opened at the same time.
`collapsible`	`boolean`	`false`	When `type` is `"single"`, allows closing content when clicking the trigger of an open item.
`value`	`string \\| string[]`	-	The controlled value(s) of the item(s) to expand.
`defaultValue`	`string \\| string[]`	-	The initial value(s) of the item(s) to expand (uncontrolled).
`onValueChange`	`(value: string \\| string[]) => void`	-	Callback called when the value changes.
`class`	`string`	-	Additional CSS classes to add to the accordion.

AccordionItem

A single item within the accordion.

Property	Type	Default	Description
`value`	`string`	Required	A unique value for the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`class`	`string`	-	Additional CSS classes to add to the item.

AccordionTrigger

The button that toggles the visibility of the accordion content.

Property	Type	Default	Description
`class`	`string`	-	Additional CSS classes to add to the trigger.
`level`	`number`	`3`	The heading level for the trigger (for accessibility).

AccordionContent

The content that is revealed when the accordion item is expanded.

Property	Type	Default	Description
`class`	`string`	-	Additional CSS classes to add to the content.

Implementation

The Accordion component is built on top of bits-ui, a collection of headless UI components for Svelte.

// Implementation details from accordion-trigger.svelte
<AccordionPrimitive.Header {level} class="flex">
  <AccordionPrimitive.Trigger
    bind:ref
    class={cn(
      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
      className
    )}
    {...restProps}
  >
    {@render children?.()}
    <ChevronDown
      class="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
    />
  </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>