Accessible accordion component for Svelte
svelte-accessible-accordion
implements WAI-ARIA design guidelines for an Accordion.
Note: This component is unstyled by design. See the Styling section.
Try it in the Svelte REPL.
Yarn
yarn add -D svelte-accessible-accordion
NPM
npm i -D svelte-accessible-accordion
pnpm
pnpm i -D svelte-accessible-accordion
<script>
import { Accordion, AccordionItem } from "svelte-accessible-accordion";
</script>
<Accordion>
<AccordionItem title="Title 1">Content 1</AccordionItem>
<AccordionItem title="Title 2">Content 2</AccordionItem>
<AccordionItem title="Title 3">Content 2</AccordionItem>
</Accordion>
Customize the accordion title by using the "title"
slot.
<Accordion>
<AccordionItem>
<strong slot="title" style="color: red">Title 1</strong>
Content 1
</AccordionItem>
<AccordionItem title="Title 2">Content 2</AccordionItem>
<AccordionItem title="Title 3">Content 2</AccordionItem>
</Accordion>
By default, only one accordion item can be expanded at one time.
Set multiselect
to allow multiple items to be expandable.
<Accordion multiselect>
<AccordionItem title="Title 1">Content 1</AccordionItem>
<AccordionItem title="Title 2">Content 2</AccordionItem>
<AccordionItem title="Title 3">Content 2</AccordionItem>
</Accordion>
Use the expanded
prop to expand an accordion item.
<Accordion>
<AccordionItem expanded title="Title 1">Content 1</AccordionItem>
<AccordionItem expanded title="Title 2">Content 2</AccordionItem>
<AccordionItem expanded title="Title 3">Content 2</AccordionItem>
</Accordion>
Bind to the expanded
prop on the accordion item.
<script>
import { Accordion, AccordionItem } from "svelte-accessible-accordion";
let expanded;
</script>
<Accordion>
<AccordionItem bind:expanded title="Expanded? {expanded}">
Content
</AccordionItem>
</Accordion>
Set disabled
to true
to disable an accordion item
<Accordion>
<AccordionItem disabled title="Title 1">Content 1</AccordionItem>
<AccordionItem disabled title="Title 2">Content 2</AccordionItem>
<AccordionItem title="Title 3">Content 2</AccordionItem>
</Accordion>
Style the component by targeting the [data-accordion]
and [data-accordion-item]
attributes.
[data-accordion] {
list-style: none;
}
[data-accordion-item] button {
border: 0;
border-radius: 0;
border-bottom: 1px solid #e0e0e0;
background: none;
font: inherit;
line-height: inherit;
color: inherit;
cursor: pointer;
padding: 0.5rem 1rem;
width: 100%;
text-align: left;
}
[data-accordion-item] button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
[data-accordion-item] [role="region"] {
padding: 1rem;
}
The semantic element structure resembles the following:
- ul [data-accordion] # Accordion
- li [data-accordion-item] # AccordionItem
- button
- [role="region"]
Accordion
propsName | Type | Default value |
---|---|---|
multiselect | boolean |
false |
AccordionItem
propsName | Value | Default value |
---|---|---|
id | string |
"item" + Math.random().toString(36)" |
title | string or slot:title |
"Title" |
expanded | boolean |
false |
disabled | boolean |
false |
ref | HTMLButtonElement |
null |
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the types folder.