Accordion
Organizes content into collapsible sections, allowing users to focus on one section at a time.
Structure
Usage
Single
Set the type
prop to "single"
to allow only one accordion item to be open at a time.
Multiple
Set the type
prop to "multiple"
to allow multiple accordion items to be open at the same time.
Disable Items
To disable an individual accordion item, set the disabled
prop to true
. This will prevent users from interacting with the item.
Controlled Value
You can programmatically control the active of the accordion item(s) using the value
prop.
Value Change Side Effects
You can use the onValueChange
prop to handle side effects when the value of the accordion changes.
Alternatively, you can use bind:value
with an $effect
block to handle side effects when the value of the accordion changes.
Reusable Wrappers
Entire Component
If you're going to be using the same accordion component multiple places throughout your app, you can create a reusable wrapper to reduce the amount of code you need to write each time.
Since we're populating the children
of the Accordion.Root
within the component, we've excluded the children
snippet prop from the component props using the WithoutChildren
type helper.
Individual Item
For each invidual item, you need an Accordion.Item
, Accordion.Header
, Accordion.Trigger
and Accordion.Content
component. You can make a reusable wrapper to reduce the amount of code you need to write each time.
API Reference
The root accordion component used to set and manage the state of the accordion.
Property | Type | Description |
---|---|---|
type Required | enum | The type of accordion. If set to Default: undefined |
value bindable prop | union | The value of the currently active accordion item. If Default: undefined |
onValueChange | function | A callback function called when the active accordion item value changes. If the Default: undefined |
disabled | boolean | Whether or not the accordion is disabled. When disabled, the accordion cannot be interacted with. Default: false |
loop | boolean | Whether or not the accordion should loop through items when reaching the end. Default: false |
orientation | enum | The orientation of the accordion. Default: vertical |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
An accordion item.
Property | Type | Description |
---|---|---|
disabled | boolean | Whether or not the accordion item is disabled. Default: false |
value Required | string | The value of the accordion item. This is used to identify when the item is open or closed. Default: undefined |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
The header of the accordion item.
Property | Type | Description |
---|---|---|
level | union | The heading level of the header. This will be set as the Default: 3 |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
The button responsible for toggling the accordion item.
Property | Type | Description |
---|---|---|
disabled | boolean | Whether or not the accordion item trigger is disabled. Default: false |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLButtonElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
The accordion item content, which is displayed when the item is open.
Property | Type | Description |
---|---|---|
forceMount | boolean | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animnation library for the content. Default: false |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |