Accordion

Accordion is related sections with interactive headers that allow users to open or close the view of the content below.

Read more about this component in the Aksel documentation.

Content

Some other content

This is default open

Properties

Property	Description	Default	Control
Properties
"data-color"	Overrides inherited color. We recommend only using `accent` and `neutral`. `unknown`	-
as	Changes the HTML element used for the root element. `"div"` `"section"`	`"div"`
indent	Whether to indent content or not. `boolean`	`true`
size	The size of the accordion. `"large"` `"medium"` `"small"`	`"medium"`
Snippets
children	List of AccordionItem components.		-

Properties included from: HTMLAttributes<HTMLDivElement>

Property	Description	Default	Control
Properties
defaultOpen	The open state when initially rendered. Use when you do not need to control the open state. `boolean`	`false`
heading	Temporary compatibility for the previous Svelte API. Prefer using `<AccordionHeader>` instead. `string` `Snippet`	-
open	Controlled open-state. Using this removes automatic control of open-state. `boolean`	`undefined`
Snippets
children	Content in Accordion.Item. Prefer including one Accordion.Header and one Accordion.Content.		-
heading	Temporary compatibility for the previous Svelte API. Prefer using `<AccordionHeader>` instead.		-
Events
onOpenChange	Callback for current open-state.		-

Properties included from: HTMLAttributes<HTMLDivElement>