Accordion

A set of disclosure sections.

type="single" keeps one open at a time, "multiple" lets them stack; defaultValue seeds which start open. The open state lives here and reaches the items through context.

Layout · keyboard contract

<script lang="ts">
	import { Accordion } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
type	'single' | 'multiple'	'single'	'single' = one item open at a time; 'multiple' = independent.
defaultValue	string | string[]	—	Item value(s) open on first render — the section a page wants to lead with. Uncontrolled: it seeds the state and the user takes it from there.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Types

export type AccordionContext = {
	isOpen: (value: string) => boolean;
	toggle: (value: string) => void;
};

Keyboard

Key	Does
Enter / Space	toggle the focused section

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Accordion type="single" defaultValue="deps">
	<AccordionItem value="deps" title="What does driftwood depend on?">
		clsx and tailwind-merge, for cn(). Nothing else.
	</AccordionItem>
	<AccordionItem value="theme" title="How do I re-theme it?">
		Redefine the CSS custom properties in your own stylesheet.
	</AccordionItem>
</Accordion>

Layout · Card · StatCard · AccordionItem · Collapsible · Separator · Table · Scroller

---

← All components · Getting started · Theming · source