Accordion

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

  // Attribution: https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
  const content = [
    {
      id: '001',
      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: '002',
      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: '003',
      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 content as item (item)}
    <Accordion.Item value={item.id}>
      <h3>
        <Accordion.ItemTrigger class="font-bold">{item.title}</Accordion.ItemTrigger>
      </h3>
      <Accordion.ItemContent>{item.description}</Accordion.ItemContent>
    </Accordion.Item>
  {/each}
</Accordion>

Controlled

Use value and onValueChange to control the value of the Accordion.

Content for item 1

<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>

Indicator

Add an indicator to the trigger with Accordion.ItemIndicator.

<script lang="ts">
  import { PlusIcon, MinusIcon } from '@lucide/svelte';
  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>

Collapsible

By default you can’t close open items. Adding collapsible changes this behavior.

<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>

Multiple

Adding multiple allows items to open independently.

<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>

Orientation

Use the orientation prop to change the layout direction of the Accordion.

<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>

Direction

<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>

API Reference

Root

Property	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

RootProvider

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

RootContext

Property	Default	Type
`children`	-	Snippet<[() => AccordionApi<PropTypes>]>

Item

Property	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

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

ItemIndicator

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

ItemContent

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

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Controlled

Indicator

Collapsible

Multiple

Orientation

Direction

API Reference

Root

RootProvider

RootContext

Item

ItemTrigger

ItemIndicator

ItemContent

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

Indicator

Item 1

Item 2

Item 3

Collapsible

Item 1

Item 2

Item 3

Multiple

Item 1

Item 2

Item 3

Orientation

Item 1

Item 2

Item 3

Direction

Item 1

Item 2

Item 3

API Reference

Root

RootProvider

RootContext

Item

ItemTrigger

ItemIndicator

ItemContent