Accordion

bun x bosia@latest add accordion

A compound component for collapsing sections of content. Built on aria-expanded triggers wired to role="region" panels, with roving arrow-key navigation and support for single- or multi-open modes.

Preview

Accordion Props

value is $bindable(). In single mode it is a string; in multiple mode it is a string[]. collapsible only applies when type="single" — when true, clicking the open item closes it.

AccordionItem Props

AccordionTrigger Props

level sets the semantic heading element (<h1>–<h6>) that wraps the trigger button, per the WAI-ARIA accordion pattern.

AccordionContent Props

Usage

<script lang="ts">
	import {
		Accordion,
		AccordionItem,
		AccordionTrigger,
		AccordionContent,
	} from "$lib/components/ui/accordion";

	let value = $state("item-1");
</script>

<Accordion type="single" collapsible bind:value>
	<AccordionItem value="item-1">
		<AccordionTrigger>Is it accessible?</AccordionTrigger>
		<AccordionContent>Yes. It ships with full keyboard navigation.</AccordionContent>
	</AccordionItem>
	<AccordionItem value="item-2">
		<AccordionTrigger>Is it styled?</AccordionTrigger>
		<AccordionContent>Yes. It matches the rest of the registry.</AccordionContent>
	</AccordionItem>
</Accordion>

Multiple Open

<script lang="ts">
	import {
		Accordion,
		AccordionItem,
		AccordionTrigger,
		AccordionContent,
	} from "$lib/components/ui/accordion";

	let value = $state<string[]>(["a"]);
</script>

<Accordion type="multiple" bind:value>
	<AccordionItem value="a">
		<AccordionTrigger>Section A</AccordionTrigger>
		<AccordionContent>A content.</AccordionContent>
	</AccordionItem>
	<AccordionItem value="b">
		<AccordionTrigger>Section B</AccordionTrigger>
		<AccordionContent>B content.</AccordionContent>
	</AccordionItem>
</Accordion>

Disabled Item

<Accordion type="single" collapsible>
	<AccordionItem value="a">
		<AccordionTrigger>Enabled</AccordionTrigger>
		<AccordionContent>Open me.</AccordionContent>
	</AccordionItem>
	<AccordionItem value="b" disabled>
		<AccordionTrigger>Disabled</AccordionTrigger>
		<AccordionContent>Never shown.</AccordionContent>
	</AccordionItem>
</Accordion>

Keyboard Navigation