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

Property	Default	Type
`className`	"w-full grid gap-2"	string \| undefined The base classes provided by Skeleton
`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

Property	Default	Type
`className`	"grid gap-2"	string \| undefined The base classes provided by Skeleton
`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
`className`	""	string \| undefined The base classes provided by Skeleton
`level`	-	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined The level of the heading. This is used to determine the heading level for accessibility purposes.
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Trigger

Property	Default	Type
`className`	"w-full grid items-center gap-4 py-2 px-4 rounded-base text-left hover:preset-tonal-primary"	string \| undefined The base classes provided by Skeleton
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Indicator

Property	Default	Type
`className`	""	string \| undefined The base classes provided by Skeleton
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself

Content

Property	Default	Type
`className`	"py-2 px-4"	string \| undefined The base classes provided by Skeleton
`children`	-	ReactNode
`element`	-	((arg: { attributes: Record<string, unknown>; }) => Element \| null) \| undefined Render the element yourself