Accordion

A set of collapsible panels with headings.

<script lang="ts">
	import { Accordion } from '@sveltery/base/accordion';
</script>

<Accordion.Root
	class="flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				What is Base UI?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Base UI is a library of high-quality unstyled Svelte components for design systems and web
				apps.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				How do I get started?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
				you’ll feel at home.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				Can I use it for my project?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">Of course! Base UI is free and open source.</div>
		</Accordion.Panel>
	</Accordion.Item>
</Accordion.Root>

{#snippet plus()}
	<svg
		width="16"
		height="16"
		viewBox="0 0 16 16"
		fill="none"
		stroke="currentColor"
		stroke-linecap="square"
		stroke-linejoin="round"
		class="block shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45"
	>
		<path d="M1.5 8h13M8 14.5v-13" />
	</svg>
{/snippet}

Anatomy

Import the component and assemble its parts:

<script lang="ts">
	import { Accordion } from '@sveltery/base/accordion';
</script>

<Accordion.Root>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Panel />
	</Accordion.Item>
</Accordion.Root>

Examples

Open multiple panels

You can set up the accordion to allow multiple panels to be open at the same time using the multiple prop.

<script lang="ts">
	import { Accordion } from '@sveltery/base/accordion';
</script>

<Accordion.Root
	multiple
	class="flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				What is Base UI?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Base UI is a library of high-quality unstyled Svelte components for design systems and web
				apps.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				How do I get started?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
				you’ll feel at home.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				Can I use it for my project?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">Of course! Base UI is free and open source.</div>
		</Accordion.Panel>
	</Accordion.Item>
</Accordion.Root>

{#snippet plus()}
	<svg
		width="16"
		height="16"
		viewBox="0 0 16 16"
		fill="none"
		stroke="currentColor"
		stroke-linecap="square"
		stroke-linejoin="round"
		class="block shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45"
	>
		<path d="M1.5 8h13M8 14.5v-13" />
	</svg>
{/snippet}

The hiddenUntilFound prop hides closed panels with hidden="until-found" so the browser can search their contents and reveal the matching panel automatically. It can be set on each Accordion.Panel, or once on Accordion.Root to apply to all panels.

To try it, press Ctrl+F (Cmd+F on macOS) and search for "restocking"—the browser opens the closed panel containing the match. When hiddenUntilFound is enabled, closed panels always remain mounted in the DOM, which also makes their contents indexable by search engines.

Older browsers that don't support hidden="until-found" keep panels hidden until their trigger opens them, and find-in-page skips over the contents.

<script lang="ts">
	import { Accordion } from '@sveltery/base/accordion';
</script>

<Accordion.Root
	hiddenUntilFound
	class="flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				How long does shipping take?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Standard shipping takes 3–5 business days. Express delivery arrives in 1–2 business days.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				What is your return policy?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				You can return any item within 30 days of delivery. Opened items may be subject to a 10%
				restocking fee.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				Do you ship internationally?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Yes, we ship to over 40 countries. International orders typically arrive within 7–14
				business days.
			</div>
		</Accordion.Panel>
	</Accordion.Item>

	<Accordion.Item class="border-t border-neutral-950 dark:border-white">
		<Accordion.Header>
			<Accordion.Trigger
				class="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800"
			>
				How can I track my order?
				{@render plus()}
			</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel
			class="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0"
		>
			<div class="px-3 py-2">
				Once your order ships, you’ll receive a tracking link by email. Tracking updates can take up
				to 24 hours to appear.
			</div>
		</Accordion.Panel>
	</Accordion.Item>
</Accordion.Root>

{#snippet plus()}
	<svg
		width="16"
		height="16"
		viewBox="0 0 16 16"
		fill="none"
		stroke="currentColor"
		stroke-linecap="square"
		stroke-linejoin="round"
		class="block shrink-0 transition-transform duration-100 ease-[ease-out] group-data-panel-open:rotate-45"
	>
		<path d="M1.5 8h13M8 14.5v-13" />
	</svg>
{/snippet}

API reference

Root

Groups all parts of the accordion. Renders a <div> element.

value unknown[] []

Name: value
Description: Values of the open items. Use bind:value to share the array with the parent. A value passed without bind: holds until the parent changes it.
Type: unknown[]
Default: []
Binding: bind:value

disabled boolean | null false

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean | null
Default: false

hiddenUntilFound boolean false

Name: hiddenUntilFound
Description: Lets page search find a closed panel and open it. Overrides keepMounted and uses hidden="until-found".
Type: boolean
Default: false

keepMounted boolean false

Name: keepMounted
Description: Whether closed panels stay in the DOM. Ignored when hiddenUntilFound is set.
Type: boolean
Default: false

loopFocus boolean true

Name: loopFocus
Description: Deprecated. Arrow keys no longer move focus, so this does nothing.
Type: boolean
Default: true

onValueChange function —

Name: onValueChange
Description: Called before the open values change. Call eventDetails.cancel() to veto it.
Type: (value: unknown[], eventDetails: AccordionRootChangeEventDetails) => void

multiple boolean false

Name: multiple
Description: When false, opening one item closes the others. When true, each item changes on its own.
Type: boolean
Default: false

orientation AccordionOrientation 'vertical'

Name: orientation
Description: Deprecated. It no longer moves focus.
Type: AccordionOrientation
Default: 'vertical'

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionRootState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionRootState, children: Snippet | undefined]>

value readonly unknown[]

Name: value
Description: Open item values. Read it from the parent with bind:value.
Type: readonly unknown[]

disabled boolean

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean

orientation AccordionOrientation

Name: orientation
Description: Orientation. It no longer moves focus. It is still exposed as data-orientation.
Type: AccordionOrientation

data-orientation

The orientation prop: vertical or horizontal.

data-disabled

Present when the accordion is disabled.

Attribute	Description	-
`data-orientation`	The `orientation` prop: `vertical` or `horizontal`.
`data-disabled`	Present when the accordion is disabled.

Item

Groups an accordion header with the corresponding panel. Renders a <div> element.

value unknown —

Name: value
Description: Identifies this item in value. Omitted values get a generated base-ui- id.
Type: unknown

disabled boolean | null false

Name: disabled
Description: Whether this item should ignore user interaction. The root disabled value also disables it.
Type: boolean | null
Default: false

onOpenChange function —

Name: onOpenChange
Description: Called before this item opens or closes. Call eventDetails.cancel() to veto it.
Type: (open: boolean, eventDetails: AccordionItemChangeEventDetails) => void

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionItemState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionItemState, children: Snippet | undefined]>

hidden boolean

Name: hidden
Description: Whether the panel is currently hidden.
Type: boolean

index number

Name: index
Description: DOM order of the item. -1 until the item host is mounted.
Type: number

open boolean

Name: open
Description: Whether this item is open.
Type: boolean

value readonly unknown[]

Name: value
Description: Open item values. Read it from the parent with bind:value.
Type: readonly unknown[]

disabled boolean

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean

orientation AccordionOrientation

Name: orientation
Description: Orientation. It no longer moves focus. It is still exposed as data-orientation.
Type: AccordionOrientation

data-open

Present when the item is open.

data-closed

Present when the item is closed.

data-hidden

Present when the item is closed and its panel has finished closing.

data-disabled

Present when the item or the accordion is disabled.

data-orientation

The orientation prop of the root.

data-index

The index of the item in DOM order.

Attribute	Description	-
`data-open`	Present when the item is open.
`data-closed`	Present when the item is closed.
`data-hidden`	Present when the item is closed and its panel has finished closing.
`data-disabled`	Present when the item or the accordion is disabled.
`data-orientation`	The `orientation` prop of the root.
`data-index`	The index of the item in DOM order.

A heading that labels the corresponding panel. Renders an <h3> element.

render Snippet<[props: HTMLAttributes<HTMLHeadingElement>, state: AccordionHeaderState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <h3>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLHeadingElement>, state: AccordionHeaderState, children: Snippet | undefined]>

hidden boolean

Name: hidden
Description: Whether the panel is currently hidden.
Type: boolean

index number

Name: index
Description: DOM order of the item. -1 until the item host is mounted.
Type: number

open boolean

Name: open
Description: Whether this item is open.
Type: boolean

value readonly unknown[]

Name: value
Description: Open item values. Read it from the parent with bind:value.
Type: readonly unknown[]

disabled boolean

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean

orientation AccordionOrientation

Name: orientation
Description: Orientation. It no longer moves focus. It is still exposed as data-orientation.
Type: AccordionOrientation

data-open

Present when the item is open.

data-closed

Present when the item is closed.

data-hidden

Present when the item is closed and its panel has finished closing.

data-disabled

Present when the item or the accordion is disabled.

data-orientation

The orientation prop of the root.

data-index

The index of the item in DOM order.

Attribute	Description	-
`data-open`	Present when the item is open.
`data-closed`	Present when the item is closed.
`data-hidden`	Present when the item is closed and its panel has finished closing.
`data-disabled`	Present when the item or the accordion is disabled.
`data-orientation`	The `orientation` prop of the root.
`data-index`	The index of the item in DOM order.

Trigger

A button that opens and closes the corresponding panel. Renders a <button> element.

disabled boolean | null —

Name: disabled
Description: Whether the trigger should ignore user interaction. false does not re-enable a disabled item or root.
Type: boolean | null

nativeButton boolean true

Name: nativeButton
Description: Whether the host is a native <button>. Set false when render supplies a non-button element.
Type: boolean
Default: true

onclick MouseEventHandler<HTMLElement> | null —

Name: onclick
Description: Runs before the trigger's handler. Call event.preventDefault() to skip it.
Type: MouseEventHandler<HTMLElement> | null

render Snippet<[props: AccordionTriggerHostProps, state: AccordionTriggerState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <button>. Spread props onto the host and render children.
Type: Snippet<[props: AccordionTriggerHostProps, state: AccordionTriggerState, children: Snippet | undefined]>

hidden boolean

Name: hidden
Description: Whether the panel is currently hidden.
Type: boolean

index number

Name: index
Description: DOM order of the item. -1 until the item host is mounted.
Type: number

open boolean

Name: open
Description: Whether this item is open.
Type: boolean

value readonly unknown[]

Name: value
Description: Open item values. Read it from the parent with bind:value.
Type: readonly unknown[]

disabled boolean

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean

orientation AccordionOrientation

Name: orientation
Description: Orientation. It no longer moves focus. It is still exposed as data-orientation.
Type: AccordionOrientation

data-panel-open

Present when the item is open.

data-hidden

Present when the item is closed and its panel has finished closing.

data-disabled

Present when the item or the accordion is disabled.

data-orientation

The orientation prop of the root.

data-index

The index of the item in DOM order.

Attribute	Description	-
`data-panel-open`	Present when the item is open.
`data-hidden`	Present when the item is closed and its panel has finished closing.
`data-disabled`	Present when the item or the accordion is disabled.
`data-orientation`	The `orientation` prop of the root.
`data-index`	The index of the item in DOM order.

Panel

A collapsible panel with the accordion item contents. Renders a <div> element.

hiddenUntilFound boolean —

Name: hiddenUntilFound
Description: Allows page search to find and expand this panel. Overrides the root value when set.
Type: boolean

keepMounted boolean —

Name: keepMounted
Description: Whether to keep this panel mounted while closed. Overrides the root value when set. Ignored when hidden-until-found is on.
Type: boolean

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionPanelState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: AccordionPanelState, children: Snippet | undefined]>

transitionStatus TransitionStatus

Name: transitionStatus
Description: Panel motion phase. Can settle before the item does.
Type: TransitionStatus

hidden boolean

Name: hidden
Description: Whether the panel is currently hidden.
Type: boolean

index number

Name: index
Description: DOM order of the item. -1 until the item host is mounted.
Type: number

open boolean

Name: open
Description: Whether this item is open.
Type: boolean

value readonly unknown[]

Name: value
Description: Open item values. Read it from the parent with bind:value.
Type: readonly unknown[]

disabled boolean

Name: disabled
Description: Whether the accordion should ignore user interaction.
Type: boolean

orientation AccordionOrientation

Name: orientation
Description: Orientation. It no longer moves focus. It is still exposed as data-orientation.
Type: AccordionOrientation

data-open

Present when the item is open.

data-closed

Present when the item is closed.

data-hidden

Present when the item is closed and its panel has finished closing.

data-disabled

Present when the item or the accordion is disabled.

data-orientation

The orientation prop of the root.

data-index

The index of the item in DOM order.

data-starting-style

Present when the panel is animating in.

data-ending-style

Present when the panel is animating out.

Attribute	Description	-
`data-open`	Present when the item is open.
`data-closed`	Present when the item is closed.
`data-hidden`	Present when the item is closed and its panel has finished closing.
`data-disabled`	Present when the item or the accordion is disabled.
`data-orientation`	The `orientation` prop of the root.
`data-index`	The index of the item in DOM order.
`data-starting-style`	Present when the panel is animating in.
`data-ending-style`	Present when the panel is animating out.

--accordion-panel-height

The panel's height in pixels while it measures, otherwise auto.

--accordion-panel-width

The panel's width in pixels while it measures, otherwise auto.