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

Top categories

Loading Svelte Themes