Skip to main content

​
Overview

The Accordion component allows users to expand and collapse content sections. It supports single or multiple panel expansion, with optional collapsible behavior.

​
Installation

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

​
Basic Usage

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

<Accordion>
  <AccordionItem.Root>
    <AccordionItem.Header>
      <div>Section 1</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    
    <AccordionItem.Body>
      <div class="p-2">
        Content for section 1
      </div>
    </AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root>
    <AccordionItem.Header>
      <div>Section 2</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    
    <AccordionItem.Body>
      <div class="p-2">
        Content for section 2
      </div>
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

​
Accordion Props

​
value
string
The value of the currently active accordion item (single mode)
​
values
string[]
Array of active accordion item values (multiple mode)
​
multiple
boolean
default:"false"
Allow multiple accordion items to be open simultaneously
​
collapsible
boolean
default:"false"
Allow all accordion items to be collapsed
​
disabled
boolean
default:"false"
Disable all accordion interactions
​
data
unknown
Custom data associated with the accordion
​
factory
Factory<AccordionBond>
Custom factory function for creating accordion bond
​
preset
string
default:"accordion"
Preset key for styling

​
AccordionItem.Root Props

​
value
string
Unique identifier for this accordion item
​
data
any
Custom data associated with this item
​
disabled
boolean
default:"false"
Disable this specific accordion item
​
factory
Factory<AccordionItemBond>
Custom factory function for creating accordion item bond

​
AccordionItem.Header Props

​
class
string
CSS classes for styling the header
Extends all HtmlAtomProps for div elements.

​
AccordionItem.Body Props

​
class
string
CSS classes for styling the body content
Extends all HtmlAtomProps for div elements.

​
AccordionItem.Indicator Props

​
class
string
CSS classes for styling the indicator icon
Extends all HtmlAtomProps for div elements.

​
Subcomponents

​
Accordion

The root container that manages accordion state and behavior.

​
AccordionItem.Root

Container for an individual accordion item.

​
AccordionItem.Header

The clickable header that toggles the accordion item.

​
AccordionItem.Body

The collapsible content panel.

​
AccordionItem.Indicator

Visual indicator (typically an icon) showing the expanded/collapsed state.

​
Examples

​
Multiple Mode

Allow multiple panels to be open at once: 
<Accordion multiple>
  <AccordionItem.Root>
    <AccordionItem.Header>
      <div>Panel 1</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    <AccordionItem.Body>
      <div class="p-2">Content 1</div>
    </AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root>
    <AccordionItem.Header>
      <div>Panel 2</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    <AccordionItem.Body>
      <div class="p-2">Content 2</div>
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

​
Collapsible Mode

Allow all panels to be collapsed: 
<Accordion collapsible>
  <AccordionItem.Root>
    <AccordionItem.Header>
      <div>Collapsible Panel</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    <AccordionItem.Body>
      <div class="p-2">This can be fully collapsed</div>
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

​
Controlled Value

Control which item is active: 
<script>
  let activeValue = $state('item-1');
</script>

<Accordion bind:value={activeValue}>
  <AccordionItem.Root value="item-1">
    <AccordionItem.Header>
      <div>Item 1</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    <AccordionItem.Body>
      <div class="p-2">Content 1</div>
    </AccordionItem.Body>
  </AccordionItem.Root>
  
  <AccordionItem.Root value="item-2">
    <AccordionItem.Header>
      <div>Item 2</div>
      <AccordionItem.Indicator class="ml-auto" />
    </AccordionItem.Header>
    <AccordionItem.Body>
      <div class="p-2">Content 2</div>
    </AccordionItem.Body>
  </AccordionItem.Root>
</Accordion>

​
Accessibility

  • Headers are keyboard navigable
  • Supports ARIA attributes for screen readers
  • Indicator provides visual feedback for expand/collapse state

Build docs developers (and LLMs) love

Get started for freeTalk to us