Accordion

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

Import

ts
import { Accordion } from "@kobalte/core/accordion";
// or
import { Root, Item, ... } from "@kobalte/core/accordion";
// or (deprecated)
import { Accordion } from "@kobalte/core";

ts
import { Accordion } from "@kobalte/core/accordion";
// or
import { Root, Item, ... } from "@kobalte/core/accordion";
// or (deprecated)
import { Accordion } from "@kobalte/core";

Features

Follow the WAI ARIA Accordion design pattern.
Full keyboard navigation.
Can expand one or multiple items.
Can be controlled or uncontrolled.

Anatomy

The accordion consists of:

Accordion: The root container for an accordion.
Accordion.Item: An item of the accordion, contains all the parts of a collapsible section.
Accordion.Header: Wraps an Accordion.Trigger. Use the as prop to update it to the appropriate heading level for your page.
Accordion.Trigger: Toggles the collapsed state of its associated item. It should be nested inside an Accordion.Header.
Accordion.Content: Contains the content to be rendered when the Accordion.Item is expanded.

tsx
<Accordion>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Content />
	</Accordion.Item>
</Accordion>

tsx
<Accordion>
	<Accordion.Item>
		<Accordion.Header>
			<Accordion.Trigger />
		</Accordion.Header>
		<Accordion.Content />
	</Accordion.Item>
</Accordion>

Example

Yes. It adheres to the WAI-ARIA design pattern.

Usage

Default value

A default expanded item can be provided using the defaultValue prop, which should correspond to the value prop provided to each accordion item.

Yes. It's unstyled by default, giving you freedom over the look and feel.

tsx
<Accordion defaultValue={["item-2"]}>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

tsx
<Accordion defaultValue={["item-2"]}>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

The value and defaultValue props always take a string[].

Controlled value

Expanded item can be controlled using the value prop, paired with the onChange event. The value prop from the accordion item will be passed into the callback when the item is expanded, allowing you to update state accordingly.

Yes. It's unstyled by default, giving you freedom over the look and feel.

Expanded item: item-2

tsx
import { createSignal } from "solid-js";
function ControlledExample() {
	const [expandedItem, setExpandedItem] = createSignal(["item-2"]);
	return (
		<>
			<Accordion value={expandedItem()} onChange={setExpandedItem}>
				<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
				<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
				<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
			</Accordion>
			<p>Expanded item: {expandedItem().join(",")}</p>
		</>
	);
}

tsx
import { createSignal } from "solid-js";
function ControlledExample() {
	const [expandedItem, setExpandedItem] = createSignal(["item-2"]);
	return (
		<>
			<Accordion value={expandedItem()} onChange={setExpandedItem}>
				<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
				<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
				<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
			</Accordion>
			<p>Expanded item: {expandedItem().join(",")}</p>
		</>
	);
}

Collapsible item

By default, accordion items are not collapsible, meaning you can't toggle them from open to close and vice-versa. Use the collapsible prop to enable this behavior.

tsx
<Accordion collapsible>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

tsx
<Accordion collapsible>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

Allow expanding multiple items

Use the multiple to allow expanding multiple accordion items at the same time. This also make all accordion items collapsible.

tsx
<Accordion multiple>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

tsx
<Accordion multiple>
	<Accordion.Item value="item-1">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-2">{/* ... */}</Accordion.Item>
	<Accordion.Item value="item-3">{/* ... */}</Accordion.Item>
</Accordion>

Animating content size

We expose the CSS custom properties --kb-accordion-content-width and --kb-accordion-content-height which you can use to animate the size of the content when it opens/closes.

css
/* style.css */
.accordion__item-content {
	overflow: hidden;
	font-size: 16px;
	animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.accordion__item-content[data-expanded] {
	animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--kb-accordion-content-height);
	}
}
@keyframes slideUp {
	from {
		height: var(--kb-accordion-content-height);
	}
	to {
		height: 0;
	}
}

css
/* style.css */
.accordion__item-content {
	overflow: hidden;
	font-size: 16px;
	animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
.accordion__item-content[data-expanded] {
	animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--kb-accordion-content-height);
	}
}
@keyframes slideUp {
	from {
		height: var(--kb-accordion-content-height);
	}
	to {
		height: 0;
	}
}

API Reference

Accordion

Accordion is equivalent to the Root import from @kobalte/core/accordion (and deprecated Accordion.Root).

Prop	Description
value	`string[]` The controlled value of the accordion item(s) to expand.
defaultValue	`string[]` The value of the accordion item(s) to expand when initially rendered. Useful when you do not need to control the state.
onChange	`(value: string[]) => void` Event handler called when the value changes.
multiple	`boolean` Whether multiple items can be opened at the same time.
collapsible	`boolean` When `multiple` is `false`, allows closing content when clicking trigger for an open item.
shouldFocusWrap	`boolean` Whether focus should wrap around when the end/start is reached.

Accordion.Item

Accordion.Item consists of Collapsible.

Prop	Description
value	`string` A unique value for the item.
disabled	`boolean` Whether the item is disabled.
forceMount	`boolean` Used to force mounting the item content when more control is needed. Useful when controlling animation with SolidJS animation libraries.

Data attribute	Description
data-expanded	Present when the accordion item is expanded.
data-closed	Present when the accordion item is collapsed.
data-disabled	Present when the accordion item is disabled.

Accordion.Header, Accordion.Trigger and Accordion.Content share the same data-attributes.

Accordion.Trigger

Accordion.Trigger consists of Collapsible.Trigger.

Accordion.Content

Accordion.Content consists of Collapsible.Content.

Rendered elements

Component	Default rendered element
`Accordion`	`div`
`Accordion.Item`	`div`
`Accordion.Header`	`h3`
`Accordion.Trigger`	`button`
`Accordion.Content`	`div`

Accessibility

Keyboard Interactions

Key	Description
`Space`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`Enter`	When focus is on an `Accordion.Trigger` of a collapsed section, expands the section.
`Tab`	Moves focus to the next focusable element.
`Shift` + `Tab`	Moves focus to the previous focusable element.
`ArrowDown`	Moves focus to the next `Accordion.Trigger`.
`ArrowUp`	Moves focus to the previous `Accordion.Trigger`.
`Home`	When focus is on an `Accordion.Trigger`, moves focus to the first `Accordion.Trigger`.
`End`	When focus is on an `Accordion.Trigger`, moves focus to the last `Accordion.Trigger`.

Accordion

Import

Features

Anatomy

Example

Is it accessible?Chevron

Is it unstyled?Chevron

Can it be animated?Chevron

Usage

Default value

Is it accessible?Chevron

Is it unstyled?Chevron

Can it be animated?Chevron

Controlled value

Is it accessible?Chevron

Is it unstyled?Chevron

Can it be animated?Chevron

Collapsible item

Is it accessible?Chevron

Is it unstyled?Chevron

Can it be animated?Chevron

Allow expanding multiple items

Is it accessible?Chevron

Is it unstyled?Chevron

Can it be animated?Chevron

Animating content size

API Reference

Accordion

Accordion.Item

Accordion.Trigger

Accordion.Content

Rendered elements

Accessibility

Keyboard Interactions