AccordionItem

One section of an Accordion: a native <button aria-expanded aria-controls> disclosing a labelled region.

It reads its open state from the Accordion's context, so it must be rendered inside one.

Layout · keyboard contract

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

Light	Dark

Props

Prop	Type	Default	What it does
value required	string	—	Identifies this section to the parent Accordion.
title required	string	—	The disclosure button's label.
disabled	boolean	false	Renders the trigger disabled; the panel cannot be opened.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Keyboard

Key	Does
Enter / Space	toggle this 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="multiple" defaultValue={['open']}>
	<AccordionItem value="open" title="An open item">
		The panel is a labelled region. A closed one is hidden, which keeps it out
		of the accessibility tree entirely.
	</AccordionItem>
	<AccordionItem value="closed" title="A closed item">Not shown.</AccordionItem>
</Accordion>

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

---

← All components · Getting started · Theming · source