Accordion

Default

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	const value = $state(['club']);
</script>

<Accordion {value}>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Collapsible

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const value = $state(['club']);
</script>

<Accordion {value} collapsible>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Multiple

<script lang="ts">
	import { Accordion } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const value = $state(['club']);
</script>

<Accordion {value} multiple>
	<Accordion.Item value="club">
		<!-- Control -->
		{#snippet lead()}<Club size={24} />{/snippet}
		{#snippet control()}Club{/snippet}
		<!-- Panel -->
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="diamond">
		{#snippet lead()}<Diamond size={24} />{/snippet}
		{#snippet control()}Diamond{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="heart" disabled>
		{#snippet lead()}<Heart size={24} />{/snippet}
		{#snippet control()}Heart (disabled){/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
	<hr class="hr" />
	<Accordion.Item value="spade">
		{#snippet lead()}<Spade size={24} />{/snippet}
		{#snippet control()}Spade{/snippet}
		{#snippet panel()}{lorem}{/snippet}
	</Accordion.Item>
</Accordion>

Open State

Each Item id added to the Accordion value array will be open by default.

State Rune

const value = $state(['club']);

<Accordion value={value}>...</Accordion>

Harcoded

<Accordion value={['club']}>...</Accordion>

Multiple Items

Use multiple to enable multiple items to be opened at once.

<Accordion multiple>...</Accordion>

Custom Icons

<script lang="ts">
  import Plus from 'lucide-svelte/icons/plus';
  import Minus from 'lucide-svelte/icons/minus';
  import Club from 'lucide-svelte/icons/club';
</script>

<Accordion>
    {#snippet iconOpen()}<Plus size={16} />{/snippet}
    {#snippet iconClosed()}<Minus size={16} />{/snippet}
    <!-- ... -->
  <AccordionItem id="club">
      {#snippet controlLead()}<Club size={24} />{/snippet}
      <!-- ... -->
  <AccordionItem>
</Accordion>

API Reference

Property	Type	Description
`animDuration`	number	The slide animation duration in milliseconds.
`base`	string	Sets base styles.
`padding`	string	Set padding styles.
`spaceY`	string	Set vertical spacing styles.
`rounded`	string	Set border radius styles.
`width`	string	Set the width styles.
`classes`	string	Provide arbitrary CSS classes.
`children` *		The default child slot.
`iconOpen`		Set the open state icon.
`iconClosed`		Set the closed state icon.
`ids`		The ids of the elements in the accordion. Useful for composition.
`multiple`		Whether multple accordion items can be expanded at the same time. Default: false
`collapsible`		Whether an accordion item can be closed after it has been expanded. Default: false
`value`		The `value` of the accordion items that are currently being expanded.
`disabled`		Whether the accordion items are disabled
`onValueChange`		The callback fired when the state of expanded/collapsed accordion items changes.
`onFocusChange`		The callback fired when the focused accordion item changes.
`dir`		The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

AccordionItem

Property	Type	Description
`headingElement`	string	The element used as the header.
`base`	string	Sets base styles.
`spaceY`	string	Set vertical spacing styles.
`classes`	string	Provide arbitrary CSS classes.
`controlBase`	string	Sets control's base styles.
`controlHover`	string	Sets control's the hover styles.
`controlPadding`	string	Sets control's the padding styles.
`controlRounded`	string	Sets control's the border radius styles.
`controlClasses`	string	Provide arbitrary CSS classes to the control.
`leadBase`	string	Sets the lead's base styles
`leadClasses`	string	Provide arbitrary CSS classes to the lead.
`contentBase`	string	Sets the lead's base styles
`contentClasses`	string	Provide arbitrary CSS classes to the content.
`indicatorBase`	string	Sets the lead's base styles
`indicatorClasses`	string	Provide arbitrary CSS classes to the indicator.
`panelBase`	string	Set the panel's base styles.
`panelPadding`	string	Set the panel's padding styles.
`panelRounded`	string	Set the panel's border-radius styles.
`panelClasses`	string	Provide arbitrary CSS classes to the panel.
`control` *		The control's default slot.
`lead`		The control's lead icon slot.
`panel`		The panels's default slot.
`value` *	string	The value of the accordion item.
`disabled`		Whether the accordion item is disabled.

Default

Club −

Diamond +

Heart (disabled) +

Spade +

Collapsible

Club −

Diamond +

Heart (disabled) +

Spade +

Multiple

Club −

Diamond +

Heart (disabled) +

Spade +

Open State

State Rune

Harcoded

Multiple Items

Custom Icons

API Reference

Accordion

AccordionItem