Accordion

A stack of sections that open and close, each with a heading button. Several can be open at once by default; type="single" keeps at most one. Anatomy: Accordion > AccordionItem > AccordionTrigger + AccordionContent. Built on the bits-ui Accordion.

Several open at once

The default lets each section open on its own. Sections glide to their own height, and what a closed one holds can't be reached by Tab. Bind value to know, or set, which are open.

Orders ship within two business days, and arrive in two to four.

Return anything unopened within 30 days for a full refund.

Keep polish out of direct sunlight, with the cap closed tight.

Open: shipping

<div class="w-full max-w-md space-y-2">
	<Accordion bind:value={open}>
		<AccordionItem value="shipping">
			<AccordionTrigger>Shipping</AccordionTrigger>
			<AccordionContent
				>Orders ship within two business days, and arrive in two to four.</AccordionContent
			>
		</AccordionItem>
		<AccordionItem value="returns">
			<AccordionTrigger>Returns</AccordionTrigger>
			<AccordionContent
				>Return anything unopened within 30 days for a full refund.</AccordionContent
			>
		</AccordionItem>
		<AccordionItem value="care">
			<AccordionTrigger>Care</AccordionTrigger>
			<AccordionContent
				>Keep polish out of direct sunlight, with the cap closed tight.</AccordionContent
			>
		</AccordionItem>
	</Accordion>
	<p class="text-muted text-xs">Open: {open.length ? open.join(', ') : 'none'}</p>
</div>

One at a time

type="single" keeps at most one section open, closing the last as the next opens.

Orders ship within two business days.

Return anything unopened within 30 days.

<Accordion type="single" bind:value={single} class="w-full max-w-md">
	<AccordionItem value="shipping">
		<AccordionTrigger>Shipping</AccordionTrigger>
		<AccordionContent>Orders ship within two business days.</AccordionContent>
	</AccordionItem>
	<AccordionItem value="returns">
		<AccordionTrigger>Returns</AccordionTrigger>
		<AccordionContent>Return anything unopened within 30 days.</AccordionContent>
	</AccordionItem>
</Accordion>

With an action in the heading

actions sits beside the heading button, inside the heading, for a control of the section's own. A button can't go inside the trigger, which is itself a button.

Two brands chosen.

<Accordion value={['brand']} class="w-full max-w-md">
	<AccordionItem value="brand">
		<AccordionTrigger>
			Brand
			{#snippet actions()}
				<Button variant="ghost" class="text-muted h-7! px-2! text-xs!">Reset</Button
				>
			{/snippet}
		</AccordionTrigger>
		<AccordionContent>Two brands chosen.</AccordionContent>
	</AccordionItem>
</Accordion>

API

`Accordion`

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		The `AccordionItem`s.
`type`	`'single'\|'multiple'`	`'multiple'`	Whether one section or several can be open at once.
`value` bindable	`string\|string[]`		The open section's value, or the open values with `type="multiple"`. Two-way bindable via `bind:value`.
`disabled`	`boolean`		Disables every section (forwarded via `...rest`).
`class`	`string`		Additional Tailwind classes merged onto the root.

`AccordionItem`

One section of an Accordion: an AccordionTrigger and its AccordionContent, separated from the next section by a divider.

Prop	Type	Description
`children` required	`import('svelte').Snippet`	An `AccordionTrigger` and an `AccordionContent`.
`value` required	`string`	Identifies the section in the accordion's `value`.
`disabled`	`boolean`	Disables the section (forwarded via `...rest`).
`class`	`string`	Additional Tailwind classes merged onto the section.

`AccordionTrigger`

The heading of an AccordionItem: a button that opens and closes the section, with a caret that turns when it is open. actions sits beside the button, inside the heading, for a control of the section's own, such as a reset, which cannot go inside the button.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		The section's title.
`actions`	`import('svelte').Snippet`		Controls beside the button, inside the heading.
`level`	`1\|2\|3\|4\|5\|6`	`3`	Heading level the trigger is announced at.
`class`	`string`		Additional Tailwind classes merged onto the button.

`AccordionContent`

What an AccordionItem shows while it is open. It glides between closed and open on its own height, and nothing in it can be reached while it is closed.

Prop	Type	Default	Description
`children` required	`import('svelte').Snippet`		The section's content.
`class`	`string`		Additional Tailwind classes merged onto the padded content.