Sivir UI
79

Accordion

A vertical stack of collapsible sections. With type="single", the default, opening a section closes the open one. With type="multiple", any number can stay open.

Yes. Each trigger is a button with aria-expanded and aria-controls, and each panel is a region labelled by its trigger.
<script lang="ts">
    import * as Accordion from '@sivir-ui/svelte/components/accordion';
</script>

<Accordion.Root type="single" value="item-1">
    <Accordion.Item value="item-1">
        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        <Accordion.Content>
            Yes. Each trigger is a button with aria-expanded and aria-controls, and each panel
            is a region labelled by its trigger.
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="item-2">
        <Accordion.Trigger>Does it animate?</Accordion.Trigger>
        <Accordion.Content>
            Yes. Panels slide open and closed over the theme's panel motion duration.
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="item-3">
        <Accordion.Trigger>Does it theme?</Accordion.Trigger>
        <Accordion.Content>
            Yes. Colors, type, borders, and timing come from theme tokens.
        </Accordion.Content>
    </Accordion.Item>
</Accordion.Root>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add accordion

Usage

Give each Item a unique value. Root's bindable value holds the open items: a string in single mode, an array of strings in multiple mode. In single mode, clicking the open item closes it unless you set collapsible={false}.

import * as Accordion from '@sivir-ui/svelte/components/accordion';

<Accordion.Root type="single" value="shipping">
  <Accordion.Item value="shipping">
    <Accordion.Trigger>Shipping</Accordion.Trigger>
    <Accordion.Content>Orders ship within two business days.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="returns">
    <Accordion.Trigger>Returns</Accordion.Trigger>
    <Accordion.Content>Return unworn items within 30 days.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Examples

Single mode

Most orders ship within 1 business day. Standard delivery takes 5-7 days.
<script lang="ts">
    import * as Accordion from '@sivir-ui/svelte/components/accordion';

    let selected = $state('shipping');
</script>

<div class="w-full max-w-md">
    <Accordion.Root type="single" bind:value={selected} collapsible={false}>
        <Accordion.Item value="shipping">
            <Accordion.Trigger>Shipping</Accordion.Trigger>
            <Accordion.Content
                >Most orders ship within 1 business day. Standard delivery takes 5-7 days.</Accordion.Content
            >
        </Accordion.Item>
        <Accordion.Item value="returns">
            <Accordion.Trigger>Returns</Accordion.Trigger>
            <Accordion.Content
                >Return items within 30 days in original condition for a full refund.</Accordion.Content
            >
        </Accordion.Item>
    </Accordion.Root>
</div>

Multiple mode

<script lang="ts">
    import * as Accordion from '@sivir-ui/svelte/components/accordion';
</script>

<div class="w-full max-w-md">
    <Accordion.Root type="multiple">
        <Accordion.Item value="delivery">
            <Accordion.Trigger>Delivery</Accordion.Trigger>
            <Accordion.Content>Arrives Thursday, March 6, by 8 pm.</Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="payment">
            <Accordion.Trigger>Payment</Accordion.Trigger>
            <Accordion.Content>Visa ending in 4242, charged $144.00.</Accordion.Content>
        </Accordion.Item>
    </Accordion.Root>
</div>

Anatomy

Accordion.Root - Groups collapsible sections.

Accordion.Item - Defines a collapsible section.

Accordion.Trigger - Toggles its item.

Accordion.Content - Contains an item's collapsible content.