Accordion

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

Installation

Import

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

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

Value

values

string[] | undefined

Values

data

unknown

undefined

Data

multiple

boolean | undefined

false

Multiple

collapsible

boolean | undefined

false

Collapsible

disabled

boolean | undefined

false

Disabled

factory

Factory<AccordionBond> | undefined

undefined

Factory

children

Snippet<[{ accordion: AccordionBond; }]> | undefined

undefined

Children

AccordionItem.Root Props

Prop

Type

Default

Description

value

string | undefined

Value

data

any

undefined

Data

disabled

boolean | undefined

false

Disabled

factory

Factory<AccordionItemBond> | undefined

undefined

Factory

...atomProps

HtmlAtomProps

All HTML element props are supported. See [Atom Props](/docs/components/atom#props) for the complete list of inherited properties.

AccordionItem.Header Props

Prop

Type

Default

Description

bond

Bond

undefined

Bond object for component communication

base

Component | Snippet

undefined

Base component or snippet to render

preset

PresetModuleName | string

undefined

Preset module name for styling

variants

VariantDefinition | Function

undefined

Variant definition or function to resolve variants

class

ClassValue | ClassValue[]

undefined

CSS class(es) to apply to the element

string

undefined

HTML tag to render as

global

boolean

false

Whether to use global styles

initial

NodeFunction

undefined

Function called on initial render

enter

TransitionFunction

undefined

Transition function for entering

exit

TransitionFunction

undefined

Transition function for exiting

animate

NodeFunction

undefined

Animation function

onmount

NodeFunction

undefined

Function called when element is mounted

ondestroy

NodeFunction

undefined

Function called when element is destroyed

children

Snippet

undefined

Children content snippet

AccordionItem.Body Props

Prop

Type

Default

Description

bond

Bond

undefined

Bond object for component communication

base

Component | Snippet

undefined

Base component or snippet to render

preset

PresetModuleName | string

undefined

Preset module name for styling

variants

VariantDefinition | Function

undefined

Variant definition or function to resolve variants

class

ClassValue | ClassValue[]

undefined

CSS class(es) to apply to the element

string

undefined

HTML tag to render as

global

boolean

false

Whether to use global styles

initial

NodeFunction

undefined

Function called on initial render

enter

TransitionFunction

undefined

Transition function for entering

exit

TransitionFunction

undefined

Transition function for exiting

animate

NodeFunction

undefined

Animation function

onmount

NodeFunction

undefined

Function called when element is mounted

ondestroy

NodeFunction

undefined

Function called when element is destroyed

children

Snippet

undefined

Children content snippet

AccordionItem.Indicator Props

Prop

Type

Default

Description

bond

Bond

undefined

Bond object for component communication

base

Component | Snippet

undefined

Base component or snippet to render

preset

PresetModuleName | string

undefined

Preset module name for styling

variants

VariantDefinition | Function

undefined

Variant definition or function to resolve variants

class

ClassValue | ClassValue[]

undefined

CSS class(es) to apply to the element

string

undefined

HTML tag to render as

global

boolean

false

Whether to use global styles

initial

NodeFunction

undefined

Function called on initial render

enter

TransitionFunction

undefined

Transition function for entering

exit

TransitionFunction

undefined

Transition function for exiting

animate

NodeFunction

undefined

Animation function

onmount

NodeFunction

undefined

Function called when element is mounted

ondestroy

NodeFunction

undefined

Function called when element is destroyed

children

Snippet

undefined

Children content snippet

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