# Collapsible

A component that toggles visibility of content sections.

## 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 { ChevronDown } from "@lucide/svelte";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "coss-svelte";
</script>

<Collapsible>
	<CollapsibleTrigger class="inline-flex items-center gap-2 font-medium text-sm">
		Show recovery keys
		<ChevronDown class="size-4" />
	</CollapsibleTrigger>
	<CollapsibleContent>
		<ul class="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">4829-1735-6621</li>
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">9182-6407-5532</li>
			<li class="rounded-sm bg-muted px-2 py-1 font-mono">3051-7924-9018</li>
		</ul>
	</CollapsibleContent>
</Collapsible>

```

## Anatomy

- `Collapsible`
- `CollapsibleContent`
- `CollapsibleTrigger`

## API Reference

### Collapsible

A component that toggles visibility of content sections.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `title` | `string` | `""` | Title text rendered by the component's built-in fallback layout. |

**Composition and refs**

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

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

### CollapsibleContent

Wraps the primary content for the parent component.

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

**Composition and refs**

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

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

### CollapsibleTrigger

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 Collapsible.Trigger](https://bits-ui.com/docs/components/collapsible#trigger).

## Implementation Details

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

## 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/collapsible.json` for the complete local file and dependency closure.
- Collapsible is stable in the current source catalog.