Accordion

This is a headless disclosure component: a vertical or horizontal stack of sections that open and close. It has roving focus and disabled items. One section can be open, or more than one section can be open. You can control the open state, or you can let the component control it.

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

Anatomy

Give each Accordion.Item a unique value. The Header, the Trigger, and the Panel of that item read the value from the context of the item. Thus you write it one time only.

<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>

Many open panels, and disabled items

Set selectionMode="multiple" to let more than one panel stay open. The default is "single". Use disabled on an Accordion.Item to stop one item, or on Accordion.Root to stop the full accordion.

Profile, password, and login sessions.

Payment methods, invoices, and tax details.

Usage guidelines

  • Use value and onChange when your own code controls the state. Use defaultValue when the component controls the state. Both props are arrays of the values of the open items.
  • Use disallowEmptySelection to keep one panel open.
  • Use orientation="horizontal" to change the axis of the arrow keys.
  • Use loop={false} to stop the focus at the first trigger and at the last trigger.
  • Use forceMount on Accordion.Panel when the content must stay in the DOM while the panel is closed.
  • Set level on Accordion.Header (from 1 to 6, the default is 3) to agree with the headings around the accordion.

Accessibility

  • Accordion.Header makes a true heading element. The default is <h3>. The heading contains the trigger button. This obeys the WAI-ARIA accordion pattern.
  • Accordion.Trigger has button semantics with aria-expanded and aria-controls.
  • Accordion.Panel has role="region", and its aria-labelledby attribute points at its trigger. While the panel is closed, the panel is hidden and inert.
  • The arrow keys move the focus between the triggers. The Home key and the End key move the focus to the first enabled trigger and to the last enabled trigger. At the ends, the focus goes to the opposite end, but not with loop={false}.
  • The Enter key and the Space key open and close the panel with the focus, like a native button.

API reference

Root

Contains all of the items. It holds the selection state and controls the 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

Contains one section that opens and closes. It gives its value to Header, Trigger and Panel through the 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 true heading element that contains the trigger. The default is h3.

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 opens and closes its panel. It sets 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 the focus must be visible (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 region that opens and closes. While it is closed, it is hidden and inert.

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 element for the 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 closes, for the CSS exit transition.
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 to open, for the CSS transition.