Accordion
A disclosure component using native <details>/<summary> elements, supporting single and multiple open modes with keyboard navigation. Item titles accept plain strings or snippets.
Import
import { Accordion } from "@hyzer-labs/ui"Demo
Panels ship no display, height, or overflow of their own, so you can animate the open and close
yourself. The reference theme's summary-icon rotation honors --hz-duration-* / --hz-ease-*. See Motion for the token values
and the @hyzer-labs/ui/motion script-side helpers built on them.
What is @hyzer-labs/ui?
It is a Svelte component library that prioritizes behavior, structure, and accessibility.
Is it accessible?
Every component ships its WAI-ARIA pattern, and the token engine grades each color pairing against WCAG AA.
Can I use it with React?
No. It is Svelte 5 only.
<!-- The panel snippet receives the item: render per-item content -->
<Accordion items={faqs}>
{#snippet panel(item)}
<p>{answers[item.id]}</p>
{/snippet}
</Accordion>Install the package
pnpm add @hyzer-labs/ui. Svelte 5 is the only peer dependency.
Import the tokens
Import '@hyzer-labs/ui/tokens.css' once at your app's root layout.
Add the reference theme
Optionally add '@hyzer-labs/ui/theme' for the styled starting point.
<!-- defaultOpen seeds the initial open set (array in 'multiple' mode) -->
<Accordion type="multiple" items={steps} defaultOpen={['install', 'tokens']}>
{#snippet panel(item)}
<p>{instructions[item.id]}</p>
{/snippet}
</Accordion>Titles become the accessible name
meta or the panel.Free plan
Panel for the free plan.
Pro plan new
Panel for the pro plan.
<!-- A title snippet receives its item, so one snippet can render every row -->
{#snippet planTitle(item)}
{planNames[item.id]}
{#if item.id === 'pro'}<span class="badge">new</span>{/if}
{/snippet}
<Accordion items={[{ id: 'free', title: planTitle }, { id: 'pro', title: planTitle }]}>
{#snippet panel(item)}…{/snippet}
</Accordion>Repeat essential detail in the panel
meta content. That
content is still there to read, but it is never part of the trigger's name. So
put anything a person needs in order to decide whether to expand a row, a price
for example, in the panel or the heading as well. meta then carries the
visual-forward version of it.Brand identity
Logo suite, typography system, color palette, and a usage guide your team can hand to any vendor. $2,400.
Website design
Wireframes through a responsive, accessible build on your existing brand system. $4,800.
<!-- meta is set on the Accordion, so one shared snippet renders every row -->
{#snippet serviceMeta(item)}
<div class="service-meta">
<span class="service-price">{serviceInfo[item.id].price}</span>
<p class="service-teaser">{serviceInfo[item.id].teaser}</p>
</div>
{/snippet}
<Accordion items={services} meta={serviceMeta}>
{#snippet panel(item)}
<p>{serviceInfo[item.id].description}</p>
{/snippet}
</Accordion>What is @hyzer-labs/ui?
It is a Svelte component library that prioritizes behavior, structure, and accessibility.
Is it accessible?
Every component ships its WAI-ARIA pattern, and the token engine grades each color pairing against WCAG AA.
Can I use it with React?
No. It is Svelte 5 only.
<Accordion {items}>
{#snippet icon()}<IconPlus size={16} />{/snippet}
{#snippet panel(item)}…{/snippet}
</Accordion>With collapsible={false} in single mode, you cannot close the open panel.
One section is always expanded.
What is @hyzer-labs/ui?
It is a Svelte component library that prioritizes behavior, structure, and accessibility.
Is it accessible?
Every component ships its WAI-ARIA pattern, and the token engine grades each color pairing against WCAG AA.
Can I use it with React?
No. It is Svelte 5 only.
<!-- One panel always stays open in single mode -->
<Accordion items={faqs} collapsible={false} defaultOpen="what">
{#snippet panel(item)}…{/snippet}
</Accordion>Open: none
Install the package
pnpm add @hyzer-labs/ui. Svelte 5 is the only peer dependency.
Import the tokens
Import '@hyzer-labs/ui/tokens.css' once at your app's root layout.
Add the reference theme
Optionally add '@hyzer-labs/ui/theme' for the styled starting point.
<Accordion type="multiple" items={steps} onToggle={(ids) => (openIds = ids)}>
{#snippet panel(item)}…{/snippet}
</Accordion>Props
| Name | Type | Default | Note |
|---|---|---|---|
items | AccordionItem[] | — | Required. See AccordionItem below. |
type | 'single' | 'multiple' | 'single' | |
defaultOpen | string | string[] | [] | |
collapsible | boolean | true | false keeps one panel open in single mode. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | |
panel | Snippet<[AccordionItem]> | — | Required. Renders each panel. |
meta | Snippet<[AccordionItem]> | — | Renders once per item inside the summary, after the heading and before the icon — a price, a teaser, or other supplementary detail. It receives the item, so one shared snippet renders every row. Meta content is never part of the trigger’s accessible name: see the note in the Meta example. |
icon | Snippet | — | Replaces the default chevron. |
onToggle | (openIds: string[]) => void | — | |
class | string | — | Merged after the hz-accordion class. |
Anything not listed above is forwarded as an attribute to the root element (or the native control in form components). So id, data-*, aria-*, and event handlers just work.
AccordionItem
| Name | Type | Default | Note |
|---|---|---|---|
id | string | — | Required. Must be unique. |
title | string | Snippet<[AccordionItem]> | — | Required. Use a string for plain text, or a snippet for inner markup — the snippet receives the item, so one shared snippet can render every row. The title becomes the row’s accessible name: see the note in the Rich titles example. |
disabled | boolean | false |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-accordion
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-state | 'open' | 'closed' | On .hz-accordion-item; rotates the icon. |
data-type | 'single' | 'multiple' | Mirrors the prop. The behaviour is native <details> grouping, not CSS, so nothing in the theme reads this — it is yours. |
[aria-disabled] | 'true' | Disabled styling hangs off aria-disabled on .hz-accordion-trigger — not off the data-disabled that also appears on the item. Tabs does the opposite; match the component you are styling. |
Part classes
| Hook | Values | Styles |
|---|---|---|
.hz-accordion-item | child element | The <details> element. |
.hz-accordion-trigger | child element | The <summary>. |
.hz-accordion-heading | child element | The heading inside the summary, at your headingLevel. |
.hz-accordion-meta | child element | The optional meta slot between the heading and the icon (renders only when the meta snippet is passed). Ships no visual layout of its own — use this class to place the slot (right-align a price, stack a teaser) and style the contents with your own classes inside the snippet. |
.hz-accordion-icon | child element | The disclosure chevron. |
.hz-accordion-panel | child element | The content. The component ships no display/height/overflow on it on purpose, so it is free for you to animate. |
Accessibility
Built on native <details>, so no ARIA is needed for disclosure semantics. Arrow keys move between summaries, and Home/End jump to the first and last.
Disabled items have aria-disabled='true' and block interaction. Summaries wrap a real heading (headingLevel) so panels join the document outline.
References: APG Accordion pattern