Accordion

Expandable content panels with support for single or multiple open items, different sizes, and visual styles.

Import

import { Accordion, AccordionItem, Collapsible } from '@atom-forge/ui';

Components

Component	Description
`Accordion`	Wrapper component that manages state and layout for accordion items.
`AccordionItem`	Individual expandable panel containing a header and content.
`Collapsible`	A standalone, single-item accordion that manages its own state.

Accordion Props

Prop	Type	Group	Default	Description
`multiple`	`boolean`	—	`false`	Allows multiple items to be open simultaneously.
`compact`	`boolean`	Size	—	Medium size padding and text.
`small`	`boolean`	Size	—	Small size padding and text.
`borderless`	`boolean`	—	`false`	Removes borders from items.
`joined`	`boolean`	—	`false`	Renders items as a single connected list with dividers.

AccordionItem Props

Prop	Type	Default	Description
`title`	`string`	—	Text displayed in the header button.
`icon`	`IconDefinition`	—	Optional icon displayed before the title.
`id`	`string`	random	Unique identifier for the item.
`class`	`string`	—	Extra CSS classes applied to the header button.

Collapsible

A simplified wrapper around AccordionItem that doesn't require an Accordion parent. It manages its own open/closed state.

Props

Prop	Type	Group	Default	Description
`title`	`string`	—	—	Text displayed in the header button.
`icon`	`IconDefinition`	—	—	Optional icon displayed before the title.
`open`	`boolean`	—	`false`	Bindable state for open/closed status.
`compact`	`boolean`	Size	—	Medium size padding and text.
`small`	`boolean`	Size	—	Small size padding and text.
`borderless`	`boolean`	—	`false`	Removes borders from the item.

Usage

<script lang="ts">
  let isOpen = $state(false);
</script>

<Collapsible title="Toggle Me" bind:open={isOpen}>
  <p>Content goes here...</p>
</Collapsible>

Visual Styles

Joined vs Separated

By default, accordion items are separated by space. Use joined to merge them into a single list.

<!-- Default (Separated) -->
<Accordion>
  <AccordionItem title="Item 1">Content 1</AccordionItem>
  <AccordionItem title="Item 2">Content 2</AccordionItem>
</Accordion>

<!-- Joined -->
<Accordion joined>
  <AccordionItem title="Item 1">Content 1</AccordionItem>
  <AccordionItem title="Item 2">Content 2</AccordionItem>
</Accordion>

Borderless

Use borderless to remove the outer border of items. Useful when nesting or placing inside other containers.

<Accordion borderless>
  <AccordionItem title="Clean Item">Content</AccordionItem>
</Accordion>

Sizes

Three sizes, mutually exclusive. Controls padding and font size of the header.

Size	Padding	Label font
(normal)	`p-4`	inherited
`compact`	`p-2`	`text-sm`
`small`	`p-1 px-2`	`text-xs`

<Accordion compact>
  <AccordionItem title="Compact Item">Content</AccordionItem>
</Accordion>

Behavior

Single vs Multiple Expansion

By default, opening an item closes others. Use multiple to allow multiple items to be open at once.

<Accordion multiple>
  <AccordionItem title="Item 1">Content 1</AccordionItem>
  <AccordionItem title="Item 2">Content 2</AccordionItem>
</Accordion>

Architecture

Accordion                   (context provider)
  └── createAccordionManager()
       └── AccordionManager instance

AccordionItem               (consumer)
  └── getAccordionManager()
       └── reads state (isOpen)
       └── triggers toggleItem(id)

The AccordionManager uses a Set<string> to track active item IDs.

If multiple is false, the set contains at most one ID.
If multiple is true, it can contain any number of IDs.

State is reactive using Svelte 5 $state runes.

When to use

Use for progressive disclosure of related sections; use Collapsible for one independently controlled section.

Alternatives

Use Tabs for one active content view or Tree for hierarchical data.

Setup and limitations

AccordionItem requires Accordion context; Collapsible creates its own context. Root is not required. Use unique, stable item IDs. Accordion starts closed and has no public active-item binding; Collapsible exposes bind:open, synchronized through effects. Multiple/size/borderless/joined manager settings are captured at initialization. Closed content is conditionally unmounted, so keep state outside panels if it must survive closing. Headers are native buttons, but no expanded/controls ARIA attributes are added by the component.

Layout