Accordion

Collapsible content sections for organizing information. Perfect for FAQs, settings panels, and content organization.

Installation

Import

import { Accordion, AccordionItem } from '@svelte-atoms/core/accordion';

Preset Configuration

Customize the accordion appearance using presets

You can customize the default styles for Accordion components by defining presets in your configuration:

Examples

Explore different accordion variations and use cases

Basic Accordion

Simple accordion with collapsible sections

Code

<Accordion>
  <AccordionItem.Root>
    <AccordionItem.Header>
      What is Atomic SV?
    </AccordionItem.Header>
    <AccordionItem.Body>
      Atomic SV is a modular, accessible, and extensible 
      Svelte UI component library built with Svelte 5.
    </AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root>
    <AccordionItem.Header>
      How do I install it?
    </AccordionItem.Header>
    <AccordionItem.Body>
      Simply run npm install atomic-sv
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

Collapsible Accordion

Simple accordion with collapsible sections

Code

<Accordion>
  <AccordionItem.Root collapsible>
    <AccordionItem.Header>
      What is Atomic SV?
    </AccordionItem.Header>
    <AccordionItem.Body>
      Atomic SV is a modular, accessible, and extensible 
      Svelte UI component library built with Svelte 5.
    </AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root>
    <AccordionItem.Header>
      How do I install it?
    </AccordionItem.Header>
    <AccordionItem.Body>
      Simply run npm install atomic-sv
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

Multiple Mode

Allow multiple sections to be open at once

Code

<Accordion multiple={true}>
  <AccordionItem.Root>
    <AccordionItem.Header>Section 1</AccordionItem.Header>
    <AccordionItem.Body>Content 1</AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root>
    <AccordionItem.Header>Section 2</AccordionItem.Header>
    <AccordionItem.Body>Content 2</AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

API Reference

Shared Atom Props

All accordion components share common animation and lifecycle hooks: initial, animate, enter, exit, onmount, and ondestroy. These are referred to as atomProps in the tables below.

Accordion Props

Prop

Type

Default

Description

value

string

Value

values

string[]

Values

data

unknown

undefined

Data

multiple

boolean

false

Multiple

collapsible

boolean

false

Collapsible

disabled

boolean

false

Disabled

factory

Factory<AccordionBond>

undefined

Factory

AccordionItem.Root Props

Prop

Type

Default

Description

value

string

Value

data

any

undefined

Data

disabled

boolean

false

Disabled

factory

Factory<AccordionItemBond>

undefined

Factory

AccordionItem.Header Props

Prop

Type

Default

Description

AccordionItem.Body Props

Prop

Type

Default

Description

AccordionItem.Indicator Props

Prop

Type

Default

Description

Accessibility

Built-in Accessibility Features

• Proper ARIA attributes (aria-expanded, aria-controls, etc.)
• Keyboard navigation (Enter, Space, Arrow keys)
• Focus management with visible indicators
• Screen reader announcements for state changes
• Semantic HTML structure
• Respects prefers-reduced-motion setting

Back to Components

Next: Button