Collapsible

Fully self-contained accessible disclosure — no UI dependency.

Styling inspired by melt-next's collapsible: a rounded trigger that lifts (shadow) when open, with the content panel tucked slightly inset beneath it, and a smooth slide open/close. A11y is correct ARIA on a native <button>:

• aria-expanded reflects state, aria-controls/labelledby wire the pair
• Enter/Space handled natively by the button

Layout · keyboard contract

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

Light	Dark

Props

Prop	Type	Default	What it does
title required	string	—	The trigger's label.
open	boolean	false	Whether the panel is showing.
class	string	—	Merged with the component's own classes, last — so yours win.
children required	Snippet	—	The content.

Keyboard

Key	Does
Enter / Space	toggle the panel

Example

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

<Collapsible title="What accessibility is built in?" open>
	<ul class="list-disc space-y-1 pl-5 text-sm">
		<li>Correct roles and state on every control.</li>
		<li>Keyboard operation before it ships.</li>
	</ul>
</Collapsible>

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

---

← All components · Getting started · Theming · source