Accordion New Alpha Light DOM & Tailwind

Open in Storybook

A vertically stacked set of collapsible sections, each with a header that toggles its content.

Overview

Usage

Composition

Examples

Accessibility

API reference

Parts

Design guidelines

This component is considered alpha. We're still finalising the API, so it may include a breaking change at any time — use it at your own risk.

Usage

Accordion is a set of collapsible sections, each with a header that toggles the visibility of its content. It coordinates a group of Accordion Item elements, keyboard focus movement between them, and which items are open.

Import the parts you need — each import registers its custom element:

Copy code

import "@nordhealth/components/lib/Accordion"
import "@nordhealth/components/lib/AccordionItem"
import "@nordhealth/components/lib/AccordionHeader"
import "@nordhealth/components/lib/AccordionTrigger"
import "@nordhealth/components/lib/AccordionPanel"

Then compose them into a set of collapsible sections:

Composition

An accordion coordinates a group of items, each pairing a header (with a trigger) and a panel.

Copy code

Accordion
├── AccordionItem
│   ├── AccordionHeader
│   │   └── AccordionTrigger
│   └── AccordionPanel
└── AccordionItem
    ├── AccordionHeader
    │   └── AccordionTrigger
    └── AccordionPanel

Copy code

<nord-accordion>
  <nord-accordion-item value="item-1">
    <nord-accordion-header>
      <nord-accordion-trigger>Trigger</nord-accordion-trigger>
    </nord-accordion-header>
    <nord-accordion-panel>Panel content.</nord-accordion-panel>
  </nord-accordion-item>
</nord-accordion>

Accordion

Accordion is the container. It owns the open state via its value property (the source of truth) and coordinates keyboard focus between items. Set multiple to allow more than one section open at once; orientation and loop-focus tune keyboard navigation.

Accordion Item

Each Accordion Item is a single collapsible section. Give every item a unique value so its open state can be tracked.

Accordion Header & Trigger

Accordion Header holds the Accordion Trigger — the button that expands and collapses its panel. Keep trigger labels short and descriptive so users can scan the sections.

Accordion Panel

Accordion Panel holds the collapsible content revealed when its item is open.

Examples

Basic

A single-open FAQ — opening one section closes the others.

Multiple

Set multiple to let several sections stay open at the same time.

RTL

The accordion follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

Each Accordion Trigger is a real button; users can move between triggers with the arrow keys and toggle a section with Enter or Space.
The open state lives on the Accordion's value — render the full set of items up front rather than adding or removing them after the accordion has connected, so focus management and aria-expanded stay in sync.
Keep trigger labels short and descriptive so screen reader users can scan the sections.

API reference

Accordion

<nord-accordion></nord-accordion>

Props

Property	Attribute	Description	Type	Default
`multiple`	`multiple`	Whether multiple items can be open at the same time.	`boolean`	`false`
`disabled`	`disabled`	Whether the component should ignore user interaction.	`boolean`	`false`
`orientation`	`orientation`	The visual orientation of the accordion. Controls whether roving focus uses left/right or up/down arrow keys.	`'vertical' \| 'horizontal'`	`'vertical'`
`loopFocus`	`loop-focus`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.	`boolean`	`true`

Slots

Slot name	Description
`Default slot`	Default slot for Accordion Item elements.

Event	Detail Type	Description
`change`	`AccordionChangeEvent`	Dispatched when an item is expanded or collapsed. The event includes a `value` array of the currently open item values.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-accordion-item-gap`	Spacing between accordion items.	—

Light DOM & Tailwind. This component renders in the light DOM, so you can style it directly with your own CSS or Tailwind utility classes — there is no shadow boundary, and its default styles are low specificity, so your utilities win.

Parts

This component is made up of the following parts.

Accordion Header

Accordion Header is the heading that labels an Accordion Panel. Following the WAI-ARIA accordion pattern, its Accordion Trigger button is wrapped in a heading element.

<nord-accordion-header></nord-accordion-header>

Props

Property	Attribute	Description	Type	Default
`level`	`level`	The heading level exposed to assistive technology, matching the surrounding document outline.	`number`	`3`

Slots

Slot name	Description
`Default slot`	Default slot for an Accordion Trigger.

Accordion Item

Accordion Item groups an Accordion Header and its Accordion Panel within an Accordion.

<nord-accordion-item></nord-accordion-item>

Props

Property	Attribute	Description	Type	Default
`value`	`value`	A unique value identifying this item within its Accordion. Used to track which items are open.	`string`	`''`
`open`	`open`	Whether this item is open. Coordinated by the parent Accordion.	`boolean`	`false`
`disabled`	`disabled`	Whether this item is disabled.	`boolean`	`false`

Slots

Slot name	Description
`Default slot`	Default slot for an Accordion Header and an Accordion Panel.

Accordion Panel

Accordion Panel holds the content revealed by its Accordion Trigger. It must be placed inside an Accordion Item and animates its height as it opens and closes.

<nord-accordion-panel></nord-accordion-panel>

Props

Property	Attribute	Description	Type	Default
`open`	`open`	Whether the panel is open. Set by the parent Accordion Item.	`boolean`	`false`

Slots

Slot name	Description
`Default slot`	Default slot for the panel content.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-accordion-panel-height`	Set during the open/close animation to the measured content height. Read it to coordinate custom animations.	—

Accordion Trigger

Accordion Trigger is the button that opens and closes its Accordion Panel. It must be placed inside an Accordion Header.

<nord-accordion-trigger></nord-accordion-trigger>

Props

Property	Attribute	Description	Type	Default
`open`	`open`	Whether the associated panel is open. Set by the parent Accordion Item; reflected so it can be styled.	`boolean`	`false`
`disabled`	`disabled`	Whether the trigger is disabled. Set by the parent Accordion Item.	`boolean`	`false`
`justifyContent`	`justify-content`	How to justify the label and icon along the trigger. By default they sit next to each other; set `space-between` to push the icon to the far end.	`\| 'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' \| undefined`	—

Slots

Slot name	Description
`Default slot`	Default slot for the trigger label and an icon. The icon is the last child, so any element or web component can be used; set its size on the element itself (for example `<nord-icon size="xxs">`).

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-accordion-trigger-gap`	The gap between the label and the icon, using our spacing tokens.	`var(--n-space-xs)`

Design guidelinesFor designers

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

Use to group several related sections of content, such as a list of frequently asked questions or grouped settings.
Give each Accordion Item a unique value so the open state can be tracked.
Use the multiple attribute when more than one section should be expandable at the same time.
Control which sections are open with the value property (an array of item values); it is the single source of truth. Render the full set of items up front rather than adding or removing them after the accordion has connected.
Keep Accordion Trigger labels short and descriptive so users can scan the sections.

Don’t

Don’t use for a single disclosure of content, use Collapsible instead.
Don’t nest interactive controls inside a trigger that compete with toggling the section.
Don’t hide content that the user always needs, such as primary actions or critical information.

Accordion New Alpha Light DOM & Tailwind

API reference

Accordion

Props

Slots

CSS Properties

Parts

Accordion Header

Props

Slots

Accordion Item

Props

Slots

Accordion Panel

Props

Slots

CSS Properties

Accordion Trigger

Props

Slots

CSS Properties

Usage

Was this page helpful?