Accordion

Example

Usage

		<Accordion type="single">
	<AccordionItem title="Is it accessible?">
		Yes. It adheres to the WAI-ARIA design pattern.
	</AccordionItem>
	<AccordionItem title="Are you sure?">
		I mean, I hope so? It's based on the bits-ui accordion component, so if not it's not my fault 😅
	</AccordionItem>
</Accordion>

API Reference

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Property Type Description

children required

Snippet

The children content to render. Should be a list of AccordionItem components.

type required

enum

If set to 'multiple', the accordion will allow multiple items to be open at the same time. If set to single, the accordion will only allow a single item to be open.

value $bindable

union

The value of the accordion item that is currently open. If type is set to "multiple", this will be an array of strings. If type is set to "single", this will be a string. Default: —

onValueChange

function

A function that is called when the value of the accordion item changes. Default: —

disabled

boolean

Whether the accordion is disabled. Default: false

ref $bindable

HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: —

Property

children

type

value

onValueChange

disabled

ref

AccordionItem

A single collapsible section within the accordion.

Property Type Description

title required

string

The title of the accordion item, displayed both when the item is closed or open.

children required

Snippet

The children content to render. The content is displayed when the item is open.

value

string

The value of the accordion item. This is used to identify when the item is open or closed. If not provided, a unique ID will be generated for this value. Default: —

disabled

boolean

Whether the accordion item is disabled. Default: false

ref $bindable

HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: —

Property

title

children

value

disabled

ref