Accordion

A headless disclosure primitive: a vertical (or horizontal) stack of collapsible sections with roving focus, single or multiple expansion, disabled items, and controlled/uncontrolled open state.

Orders ship within two business days. Tracking details are emailed as soon as the carrier scans your package.

Anatomy

Provide a unique value on every Accordion.Item — the matching Header, Trigger and Panel read it from the item context, so you only declare it once.

<script>
	import { Accordion } from '@human-kit/ui';
</script>

<Accordion.Root defaultValue={['overview']}>
	<Accordion.Item value="overview">
		<Accordion.Header>
			<Accordion.Trigger>Overview</Accordion.Trigger>
		</Accordion.Header>
		<Accordion.Panel>Overview content</Accordion.Panel>
	</Accordion.Item>
</Accordion.Root>

Multiple expansion and disabled items

Set selectionMode="multiple" to allow more than one panel open at a time (default is "single"). Use disabled on Accordion.Item to disable a single item, or on Accordion.Root to disable the whole accordion.

Profile, password, and login sessions.

Payment methods, invoices, and tax details.

Usage guidelines

  • Use value / onChange for controlled state and defaultValue for uncontrolled state. Both are arrays of open item values.
  • Use disallowEmptySelection to keep at least one panel open.
  • Use orientation="horizontal" to switch the arrow-key navigation axis.
  • Use loop={false} to stop focus from wrapping at the first and last triggers.
  • Use forceMount on Accordion.Panel when collapsed panel content must stay in the DOM.
  • Set level on Accordion.Header (1–6, default 3) to match the surrounding document outline.

Accessibility

  • Accordion.Header renders a real heading element (<h3> by default) that wraps the trigger button, following the WAI-ARIA accordion pattern.
  • Accordion.Trigger renders button semantics with aria-expanded and aria-controls.
  • Accordion.Panel renders role="region" and aria-labelledby pointing at its trigger, and is hidden + inert while collapsed.
  • Arrow keys move focus between triggers, Home/End jump to the first or last enabled trigger, and focus wraps at the ends unless loop={false}.
  • Enter/Space toggle the focused panel via native button activation.

API reference

Root

Groups all items and manages selection state and roving focus.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-accordion-root Identifies the root element.
data-disabled Present when disabled.
data-orientation The accordion orientation: 'vertical' or 'horizontal'.

Item

Wraps one collapsible section. Provides its value to Header, Trigger and Panel via context.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-accordion-item Identifies an item element.
data-accordion-value The item value, serialized as a string.
data-accordion-value-type The runtime type of the item value (string or number).
data-disabled Present when disabled.
data-open Present while the item is expanded.
data-orientation The accordion orientation: 'vertical' or 'horizontal'.

Header

A real heading element (h3 by default) wrapping the trigger.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-accordion-header Identifies a header element.
data-disabled Present when disabled.
data-open Present while the item is expanded.

Trigger

The button that toggles its panel. Exposes aria-expanded and aria-controls.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-accordion-trigger Identifies a trigger element.
data-accordion-value The item value, serialized as a string.
data-accordion-value-type The runtime type of the item value (string or number).
data-disabled Present when disabled.
data-focus-visible Present while focus should be visibly indicated (keyboard modality).
data-focused Present while the element has focus.
data-open Present while the item is expanded.
data-orientation The accordion orientation: 'vertical' or 'horizontal'.

Panel

The collapsible region, hidden and inert while collapsed.

Prop Type Default

* required. Native HTML attributes of the underlying element are also accepted.

Data attribute Description
data-accordion-panel Identifies a panel element.
data-accordion-panel-content Identifies the inner content wrapper used for height animation.
data-accordion-value The item value, serialized as a string.
data-accordion-value-type The runtime type of the item value (string or number).
data-closed Present while the item is collapsed.
data-ending-style Present while the panel is collapsing, for CSS exit transitions.
data-open Present while the item is expanded.
data-orientation The accordion orientation: 'vertical' or 'horizontal'.
data-starting-style Present for one frame when the panel starts expanding, for CSS transitions.