Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

Anatomy

<script>
  import {
    Accordion,
    AccordionItem,
    AccordionItemTrigger,
    AccordionItemContent,
  } from "@saas-ui/svelte/components/accordion";
</script>

<Accordion.Root collapsible>
  <AccordionItem value="item-1">
    <AccordionItemTrigger>Section 1</AccordionItemTrigger>
    <AccordionItemContent>Content for section 1</AccordionItemContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionItemTrigger>Section 2</AccordionItemTrigger>
    <AccordionItemContent>Content for section 2</AccordionItemContent>
  </AccordionItem>
</Accordion.Root>

Examples

Basic Accessibility

Basic accordion with default styling and collapsible behavior.

<Accordion.Root
	id="basic-accordion"
	items={basicItems}
	variant="outline"
	size="md"
	collapsible
	defaultValue={["b"]}
/>

Controlled Accessibility

Controlled accordion with pre-selected item using the value prop.

<Accordion.Root
	id="controlled-accordion"
	items={controlledItems}
	collapsible
	defaultValue={["b"]}
/>

Disabled Item Accessibility

Individual accordion items can be disabled to prevent interaction.

<Accordion.Root
	id="disabled-accordion"
	items={disabledItems}
	collapsible
	defaultValue={["a"]}
/>

Multiple Accessibility

Multiple accordion items can be expanded at the same time using the multiple prop.

<Accordion.Root
	id="multiple-accordion"
	items={multipleItems}
	collapsible
	multiple
	defaultValue={["a", "b"]}
/>

Sizes Accessibility

Use the size prop to change the size of the accordion. Available sizes: sm, md, lg.

<Stack gap={8}>
	{#each accordionSizes as size}
		<Stack gap={2}>
			<Text size="xs">{size}</Text>
			<Accordion.Root
				id="size-{size}-accordion"
				items={createItems(`Size ${size}`)}
				{size}
				collapsible
				defaultValue={["b"]}
			/>
		</Stack>
	{/each}
</Stack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: outline, subtle, enclosed, plain.

<Stack gap={8}>
	{#each ["outline", "subtle", "enclosed", "plain"] as const as variant}
		<Stack gap={2}>
			<Text size="xs">{variant}</Text>
			<Accordion.Root
				id="variant-{variant}-accordion"
				items={createItems(`Variant ${variant}`)}
				{variant}
				collapsible
				defaultValue={["b"]}
			/>
		</Stack>
	{/each}
</Stack>

With Icon Accessibility

Accordion items with icons in the trigger for visual context.

<Accordion.Root id="icon-accordion" collapsible defaultValue={["account"]}>
	<Accordion.Item value="account">
		<Accordion.ItemTrigger>
			<Icon as={User} size="sm" colour="gray" />
			Account Details
		</Accordion.ItemTrigger>
		<Accordion.ItemContent>
			Manage your profile information and email preferences here.
		</Accordion.ItemContent>
	</Accordion.Item>

	<Accordion.Item value="billing">
		<Accordion.ItemTrigger>
			<Icon as={CreditCard} size="sm" colour="gray" />
			Billing & Plan
		</Accordion.ItemTrigger>
		<Accordion.ItemContent>
			View your invoice history and manage your subscription plan.
		</Accordion.ItemContent>
	</Accordion.Item>

	<Accordion.Item value="preferences">
		<Accordion.ItemTrigger>
			<Icon as={Gear} size="sm" colour="gray" />
			Preferences
		</Accordion.ItemTrigger>
		<Accordion.ItemContent>
			Adjust your notification settings and application theme.
		</Accordion.ItemContent>
	</Accordion.Item>
</Accordion.Root>

Props

Accordion.Root

The root container component for the accordion.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	Content to render inside the accordion (composition API).
`items`	`AccordionItem[]`	`-`	Array of items for simple usage.
`collapsible`	`boolean`	`false`	Whether accordion items can be collapsed.
`multiple`	`boolean`	`false`	Whether multiple accordion items can be open at once.
`defaultValue`	`string[]`	`-`	The default value(s) of the accordion items to open.
`id`	`string`	`-`	Unique identifier for the accordion. Required for accessibility.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the accordion.
`variant`	`"outline" \| "subtle" \| "enclosed" \| "plain"`	`"outline"`	The visual style of the accordion.
`onPrefetch`	`(value: string) => void`	`-`	Callback invoked when hovering over an item (for prefetching content). Similar to Astro's link prefetching, this allows preloading data before selection.
`class`	`string`	`-`	Additional CSS classes to apply.

AccordionItem

A single accordion item containing a trigger and content.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The content of the accordion item (trigger and content).
`value`	`string`	`-`	The unique value of the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`class`	`string`	`-`	Additional CSS classes to apply.

AccordionItemTrigger

The clickable header that expands/collapses the content.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The content of the trigger.
`class`	`string`	`-`	Additional CSS classes to apply.

AccordionItemContent

The collapsible content section of an accordion item.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	The content of the accordion item.
`class`	`string`	`-`	Additional CSS classes to apply.