svelte-accessible-accordion

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.

---

Installation

Yarn

yarn add -D svelte-accessible-accordion

NPM

npm i -D svelte-accessible-accordion

pnpm

pnpm i -D svelte-accessible-accordion

Usage

Basic

<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>

Slottable title

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>

Multiselectable items

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>

Expanded items

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>

Disabled items

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>

Styling

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"]

API

Accordion props

Name	Type	Default value
multiselect	boolean	false

AccordionItem props

Name	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

Forwarded events

• on:click

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

License

MIT