Accordion

API Reference

Usage

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

<Accordion>
	<AccordionItem value="pricing">
		<AccordionHeader>How much does it cost?</AccordionHeader>
		<AccordionContent>
			Basic plan starts at $10/month. Professional plan at $29/month. Enterprise plan has custom
			pricing.
		</AccordionContent>
	</AccordionItem>
	<AccordionItem value="cancel">
		<AccordionHeader>Can I cancel my subscription anytime?</AccordionHeader>
		<AccordionContent>
			Yes, cancel anytime with no fees. Access continues until end of billing period.
		</AccordionContent>
	</AccordionItem>
	<AccordionItem value="support">
		<AccordionHeader>How can I get support?</AccordionHeader>
		<AccordionContent>
			24/7 email and chat support available. Enterprise includes dedicated support.
		</AccordionContent>
	</AccordionItem>
</Accordion>

Properties

The Accordion component extends the Bits UI <Accordion> component. Find the full list of available properties in the official Bits UI documentation.

AccordionHeader

Prop	Type	Default
`icon`	`ComponentType`	-

AccordionContent

Prop	Type	Default
`indent`	`boolean`	`false`

Examples

Default

Icon support

Add an icon prop to the AccordionItem component to display a leading icon in the header.

When using icon, you can enable content indentation with the indent prop on AccordionContent to align the content with the header text.

Disabled

Disable interaction for the entire accordion by adding the disabled prop to the Accordion component.

Disabled item

Disable interaction for a specific item by adding the disabled prop to the AccordionItem component.

On this page