Accordion

A vertically stacked set of expandable sections.

Examples

Installation

Install the package, then import only the components a route uses. Exports are tree-shakable.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { Accordion } from 'fractalsvelte';
</script>

Usage

<script lang="ts">
	import { Accordion, AccordionItem } from 'fractalsvelte';
</script>

<Accordion>
	<AccordionItem value="a" title="Is it accessible?">Yes.</AccordionItem>
</Accordion>

Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Whether one or several items can be open at once.
`variant`	`'plain' \| 'outlined' \| 'subtle'`	`'outlined'`	The visual treatment of the container.
`value`	`string[]`	`[]`	The open item values. Supports bind:.

AccordionItem

Prop	Type	Default	Description
`value`	`string`	`-`	A unique value identifying this item.
`title`	`string`	`-`	The label shown in the trigger.
`disabled`	`boolean`	`false`	Prevents the item from opening.