• Type to search the docs
Markdown:
Components

Accordion

A container with multiple collapsible sections where only one section can be expanded at a time.

First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.

Usage

Wrap one or more Disclosure children.

Svelte
<Accordion {...props}>
  <Disclosure label="Section 1" {...props}>Content</Disclosure>
  <Disclosure label="Section 2" {...props}>Content</Disclosure>
</Accordion>

If you do not need open/close animation or programmatic state tracking, native <details name="..."> elements already give exclusive single-open behavior on their own; reach for Accordion only when you need those extras.

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<div class="whole" role="group">
  {#if children}
    {children}
  {:else}
    {#each items as item}
      <Disclosure id={item.value} label={item.label} inactive={item.inactive}>
        {item.panel}
      </Disclosure>
    {/each}
  {/if}
</div>

Dependency

Props

NameTypeDefaultDescription
itemsAccordionItem[]-Data-mode array of AccordionItem; each item has a unique value addressed by current, a label as string / Snippet<[open, variant]> / component, a panel as Snippet<[variant]> / component, and optional inactive
childrenSnippet-Declarative mode: place <Disclosure id=...> children directly; when both children and items are supplied, children wins
currentstring-Bindable value of the open item; undefined means all closed. Accordion is exclusive (at most one item open at a time)
stylingSVSClass-Styling override
variantSVSVariantNEUTRALVariant
disclosureDisclosureProps-Default props applied to the data-mode inner Disclosure

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-accordion

Internal dependent components combine the parent class with their own default class names, resulting in multiple classes (e.g., svs-accordion svs-disclosure).

Behavior

Declarative <Disclosure id=...> children automatically coordinate exclusive open state through current and inherit the base variant/styling.

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

  • Accordion (whole <div>): role="group".

Each item is a Disclosure child. See Disclosure for each item's ARIA attributes and keyboard behavior.

Standards Basis

Accordion items are built on native <details> / <summary> through Disclosure, so keyboard and assistive-technology support follows the browser standard for disclosure controls. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript
type AccordionComponent = { component: Component<any>; props?: Record<string, unknown> };
type AccordionItem = {
  value: string; // REQUIRED, unique within `items`. Addresses `current`.
  label: string | Snippet<[boolean, string]> | AccordionComponent;
  panel: Snippet<[string]> | AccordionComponent;
  inactive?: string | boolean; // (false) reason string OR true; forwarded to Disclosure
};
interface AccordionProps {
  items?: AccordionItem[];
  children?: Snippet;
  current?: string; // bindable, undefined = all closed
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  disclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps | "id" | "inactive">;
}
type AccordionReqdProps = never;
type AccordionBindProps = "current";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.

With Interactive Variant

Preset for Demo
Enter variant as you like
First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.