Accordion · Skeleton

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';
import { ChevronDownIcon } from 'lucide-react';
import { Fragment } from 'react';

export default function Default() {
	/**
	 * Attribution
	 * @see https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
	 */
	const items = [
		{
			id: '1',
			title: 'Your skeleton is made of more than 200 bones',
			description:
				'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
		},
		{
			id: '2',
			title: 'The smallest bone in the body is in your ear',
			description:
				'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
		},
		{
			id: '3',
			title: 'One bone isn’t connected to any other bones',
			description:
				'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
		},
	];
	return (
		<Accordion>
			{items.map((item, i) => (
				<Fragment key={item.id}>
					{i !== 0 && <hr className="hr" />}
					<Accordion.Item value={item.id}>
						<h3>
							<Accordion.ItemTrigger className="font-bold flex items-center justify-between gap-2">
								{item.title}
								<Accordion.ItemIndicator className="group">
									<ChevronDownIcon className="h-5 w-5 transition group-data-[state=open]:rotate-180" />
								</Accordion.ItemIndicator>
							</Accordion.ItemTrigger>
						</h3>
						<Accordion.ItemContent>{item.description}</Accordion.ItemContent>
					</Accordion.Item>
				</Fragment>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	import { slide } from 'svelte/transition';

	/**
	 * Attribution
	 * @see https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
	 */
	const items = [
		{
			id: '1',
			title: 'Your skeleton is made of more than 200 bones',
			description:
				'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
		},
		{
			id: '2',
			title: 'The smallest bone in the body is in your ear',
			description:
				'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
		},
		{
			id: '3',
			title: 'One bone isn’t connected to any other bones',
			description:
				'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
		},
	];
</script>

<Accordion>
	{#each items as item, i (item)}
		{#if i !== 0}
			<hr class="hr" />
		{/if}
		<Accordion.Item value={item.id}>
			<h3>
				<Accordion.ItemTrigger class="font-bold flex items-center justify-between gap-2">
					{item.title}
					<Accordion.ItemIndicator class="group">
						<ChevronDownIcon class="h-5 w-5 transition group-data-[state=open]:rotate-180" />
					</Accordion.ItemIndicator>
				</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>
				{#snippet element(attributes)}
					{#if !attributes.hidden}
						<div {...attributes} transition:slide={{ duration: 150 }}>
							{item.description}
						</div>
					{/if}
				{/snippet}
			</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Controlled

Use the open and onOpenChange props to control the state.

Content for item 1

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState(['1']);

	return (
		<Accordion value={value} onValueChange={(details) => setValue(details.value)}>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

Content for item 1

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';

	let value = $state(['1']);
</script>

<Accordion {value} onValueChange={(details) => (value = details.value)}>
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item}>
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Multiple

Allow multiple accordion items to stay open at once using the multiple prop.

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';


export default function Multiple() {
	return (
		<Accordion multiple>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion multiple>
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item}>
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Collapsible

Allow closing all items when one is open using the collapsible prop.

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function Collapsible() {
	return (
		<Accordion collapsible>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion collapsible>
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item}>
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Indicator

Add a custom indicator to accordion triggers.

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';

export default function Indicator() {
	return (
		<Accordion>
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger className="flex justify-between items-center">
							Item {item}
							<Accordion.ItemIndicator className="group">
								<MinusIcon className="size-4 group-data-[state=open]:block hidden" />
								<PlusIcon className="size-4 group-data-[state=open]:hidden block" />
							</Accordion.ItemIndicator>
						</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import MinusIcon from '@lucide/svelte/icons/minus';
	import PlusIcon from '@lucide/svelte/icons/plus';
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion>
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item}>
			<h3>
				<Accordion.ItemTrigger class="flex justify-between items-center">
					Item {item}
					<Accordion.ItemIndicator class="group">
						<MinusIcon class="size-4 group-data-[state=open]:block hidden" />
						<PlusIcon class="size-4 group-data-[state=open]:hidden block" />
					</Accordion.ItemIndicator>
				</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Orientation

Render the accordion vertically or horizontally using the orientation prop.

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function Orientation() {
	return (
		<Accordion orientation="horizontal">
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item} className="data-[state=open]:flex-1">
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion orientation="horizontal">
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item} class="data-[state=open]:flex-1">
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Dir

Set the text direction ( ltr or rtl ) using the dir prop.

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<Accordion dir="rtl">
			{['1', '2', '3'].map((item) => (
				<Accordion.Item key={item} value={item}>
					<h3>
						<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
					</h3>
					<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
				</Accordion.Item>
			))}
		</Accordion>
	);
}

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion dir="rtl">
	{#each ['1', '2', '3'] as item (item)}
		<Accordion.Item value={item}>
			<h3>
				<Accordion.ItemTrigger>Item {item}</Accordion.ItemTrigger>
			</h3>
			<Accordion.ItemContent>Content for item {item}</Accordion.ItemContent>
		</Accordion.Item>
	{/each}
</Accordion>

Anatomy

Here’s an overview of how the Accordion component is structured in code:

tsx

import { Accordion } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Accordion>
			<Accordion.Item>
				<Accordion.ItemTrigger />
				<Accordion.ItemIndicator />
				<Accordion.ItemContent />
			</Accordion.Item>
		</Accordion>
	);
}

svelte

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
</script>

<Accordion>
	<Accordion.Item>
		<Accordion.ItemTrigger />
		<Accordion.ItemIndicator />
		<Accordion.ItemContent />
	</Accordion.Item>
</Accordion>

API Reference

Root

Prop	Default	Type
`ids`	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined The ids of the elements in the accordion. Useful for composition.
`multiple`	false	boolean \| undefined Whether multiple accordion items can be expanded at the same time.
`collapsible`	false	boolean \| undefined Whether an accordion item can be closed after it has been expanded.
`value`	—	string[] \| undefined The controlled value of the expanded accordion items.
`defaultValue`	—	string[] \| undefined The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
`disabled`	—	boolean \| undefined Whether the accordion items are disabled
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined The callback fired when the state of expanded/collapsed accordion items changes.
`onFocusChange`	—	((details: FocusChangeDetails) => void) \| undefined The callback fired when the focused accordion item changes.
`orientation`	"vertical"	"horizontal" \| "vertical" \| undefined The orientation of the accordion items.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	AccordionApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(accordion: AccordionApi<PropTypes>) => ReactNode

Item

Prop	Default	Type
`value`	—	string The value of the accordion item.
`disabled`	—	boolean \| undefined Whether the accordion item is disabled.
`children`	—	ReactNode
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ItemTrigger

Prop	Default	Type
`children`	—	ReactNode
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

ItemIndicator

Prop	Default	Type
`children`	—	ReactNode
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ItemContent

Prop	Default	Type
`children`	—	ReactNode
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

Prop	Default	Type
`ids`	—	Partial<{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined The ids of the elements in the accordion. Useful for composition.
`multiple`	false	boolean \| undefined Whether multiple accordion items can be expanded at the same time.
`collapsible`	false	boolean \| undefined Whether an accordion item can be closed after it has been expanded.
`value`	—	string[] \| undefined The controlled value of the expanded accordion items.
`defaultValue`	—	string[] \| undefined The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
`disabled`	—	boolean \| undefined Whether the accordion items are disabled
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined The callback fired when the state of expanded/collapsed accordion items changes.
`onFocusChange`	—	((details: FocusChangeDetails) => void) \| undefined The callback fired when the focused accordion item changes.
`orientation`	"vertical"	"horizontal" \| "vertical" \| undefined The orientation of the accordion items.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => AccordionApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => AccordionApi<PropTypes>]>

Item

Prop	Default	Type
`value`	—	string The value of the accordion item.
`disabled`	—	boolean \| undefined Whether the accordion item is disabled.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemTrigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

ItemIndicator

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ItemContent

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Your skeleton is made of more than 200 bones

The smallest bone in the body is in your ear

One bone isn’t connected to any other bones

Your skeleton is made of more than 200 bones

The smallest bone in the body is in your ear

One bone isn’t connected to any other bones

Controlled

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Multiple

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Collapsible

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Indicator

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Orientation

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Dir

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Anatomy

API Reference

Root

Provider

Context

Item

ItemTrigger

ItemIndicator

ItemContent

Root

Provider

Context

Item

ItemTrigger

ItemIndicator

ItemContent