# Accordion

A set of collapsible panels with headings and content.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "coss-svelte";

const items = [
	{
		content:
			"Base UI is a library of high-quality unstyled React components for design systems and web apps.",
		id: "1",
		title: "What is Base UI?",
	},
	{
		content:
			"Head to the \u201CQuick start\u201D guide in the docs. If you\u2019ve used unstyled libraries before, you\u2019ll feel at home.",
		id: "2",
		title: "How do I get started?",
	},
	{
		content: "Of course! Base UI is free and open source.",
		id: "3",
		title: "Can I use it for my project?",
	},
];
</script>

<Accordion class="w-full" value="3">
	{#each items as item}
		<AccordionItem value={item.id}>
			<AccordionTrigger>{item.title}</AccordionTrigger>
			<AccordionContent>{item.content}</AccordionContent>
		</AccordionItem>
	{/each}
</Accordion>

```

## Anatomy

- `Accordion`
- `AccordionContent`
- `AccordionHeader`
- `AccordionItem`
- `AccordionTrigger`

## API Reference

### Accordion

A set of collapsible panels with headings and content.

**Signatures**

- `{ type?: "single"; value?: string; onValueChange?: OnChangeFn<string> }`
- `{ type: "multiple"; value?: string[]; onValueChange?: OnChangeFn<string[]> }`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | `"single"` | Behavior, selection, or HTML type passed to the underlying control. |
| `bind:value` | `string \| string[]` | `""` | Current value for the component. Bind with `bind:value` when supported. |
| `items` | `AccordionItem[]` | `[]` | Items rendered by the component's built-in fallback composition. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Accordion.Root](https://bits-ui.com/docs/components/accordion#root).

### AccordionContent

Wraps the primary content for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `forceMount` | `boolean` | `true` | Keeps content mounted while closed so transitions can complete. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Accordion.Content](https://bits-ui.com/docs/components/accordion#content).

### AccordionHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Accordion.Header](https://bits-ui.com/docs/components/accordion#header).

### AccordionItem

Renders one selectable or repeated item.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Accordion.Item](https://bits-ui.com/docs/components/accordion#item).

### AccordionTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Accordion.Trigger](https://bits-ui.com/docs/components/accordion#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Layout & Navigation |
| Particles | 4 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/accordion.json` for the complete local file and dependency closure.
- Accordion is stable in the current source catalog.