Accordion - Skeleton

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  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.';
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconClub />
            <span>Club</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-1') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconDiamond />
            <span>Diamond</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-2') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconHeart />
            <span>Heart</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-3') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[auto_1fr_auto]">
            <IconSpade />
            <span>Spade</span>
            <Accordion.Indicator>
              <Accordion.Context>{(ctx) => (ctx.api.value.includes('item-4') ? '-' : '+')}</Accordion.Context>
            </Accordion.Indicator>
          </Accordion.Trigger>
          <Accordion.Content>{lorem}</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

State

Note that value and onValueChanged are optional on the root component.

'use client';

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

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger>Item 1</Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger>Item 2</Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger>Item 3</Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

Collapsible

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

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Club</span>
            <IconClub />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Diamond</span>
            <IconDiamond />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Heart</span>
            <IconHeart />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Spade</span>
            <IconSpade />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 4</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

Multiple

Adding multiple allows items to open independently.

'use client';

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

export default function () {
  return (
    <Accordion multiple>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger>Item 1</Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger>Item 2</Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger>Item 3</Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

Grid Columns

Use Grid Columns to adjust the layout of the Trigger component.

'use client';

import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club as IconClub, Diamond as IconDiamond, Heart as IconHeart, Spade as IconSpade } from 'lucide-react';

export default function () {
  return (
    <Accordion>
      <Accordion.Item value="item-1">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Club</span>
            <IconClub />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 1</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-2">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Diamond</span>
            <IconDiamond />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 2</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-3">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Heart</span>
            <IconHeart />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 3</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
      <hr className="hr" />
      <Accordion.Item value="item-4">
        <Accordion.Heading>
          <Accordion.Trigger className="grid-cols-[1fr_auto]">
            <span>Spade</span>
            <IconSpade />
          </Accordion.Trigger>
          <Accordion.Content>Content for Item 4</Accordion.Content>
        </Accordion.Heading>
      </Accordion.Item>
    </Accordion>
  );
}

API Reference

Root

"w-full grid gap-2"

Property	Default	Type
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself
`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.

RootContext

Property	Default	Type
`children`	-	(context: AccordionRootContextType) => ReactNode

Item

"grid gap-2"

Property	Default	Type
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself
`value`	-	string The value of the accordion item.
`disabled`	-	boolean \| undefined Whether the accordion item is disabled.

ItemContext

Property	Default	Type
`children`	-	(context: AccordionItemContextType) => ReactNode

Heading

""

Property	Default	Type
`level`	3	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined The level of the heading.
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Trigger

"w-full grid items-center gap-4 py-2 px-4 rounded-base text-left hover:preset-tonal-primary"

Property	Default	Type
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Indicator

""

Property	Default	Type
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Content

"py-2 px-4"

Property	Default	Type
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself