ComponentsAccordion

ImplementedDisclosure / navigation

Accordion

Reveal related sections of content in a compact, keyboard-friendly stack.

<hui-accordion>View source View spec

Interactive

Try it

type, value, collapsible

Shipping

We ship worldwide with tracking included.

Returns

Returns are accepted within 30 days.

Support

Contact support for assistance.

Markup

State

Events

<hui-accordion id="playground-accordion" type="single" value="shipping" collapsible heading-level="3" aria-label="Shipping questions">
  <hui-accordion-item value="shipping">
    <hui-accordion-trigger>Shipping</hui-accordion-trigger>
    <hui-accordion-content>We ship worldwide with tracking included.</hui-accordion-content>
  </hui-accordion-item>
  <hui-accordion-item value="returns">
    <hui-accordion-trigger>Returns</hui-accordion-trigger>
    <hui-accordion-content>Returns are accepted within 30 days.</hui-accordion-content>
  </hui-accordion-item>
  <hui-accordion-item value="support" disabled>
    <hui-accordion-trigger>Support</hui-accordion-trigger>
    <hui-accordion-content>Contact support for assistance.</hui-accordion-content>
  </hui-accordion-item>
</hui-accordion>

data-state: Waiting for enhancement

No component events yet.

Usage

Use hui-accordion for a collection of related disclosure sections. Each item has a stable value, a trigger button, and a content region. The root value attribute is the selection source of truth: a single accordion stores one value; a multiple accordion stores comma-separated values.

Use type="single" for one open item at a time and type="multiple" when several sections may be open. Add collapsible to a single accordion when its open item can be closed. The component does not measure or animate content; consumers may use the data-state hooks and the grid-row recipe from the fixture.

Anatomy

Root: hui-accordion
Item: hui-accordion-item
Trigger: hui-accordion-trigger renders button[type="button"]
Content: hui-accordion-content renders a labelled role="region"
State hooks: item and content data-state="open|closed"; closed content has hidden

Examples

Fixture exampleSource-backed

<section aria-labelledby="faq-heading">
    <h2 id="faq-heading">Frequently asked questions</h2>
    <hui-accordion id="faq" type="single" value="shipping" collapsible heading-level="3">
      <hui-accordion-item value="shipping">
        <hui-accordion-trigger><b>Shipping</b></hui-accordion-trigger>
        <hui-accordion-content>We ship worldwide.</hui-accordion-content>
      </hui-accordion-item>
      <hui-accordion-item value="returns">
        <hui-accordion-trigger>Returns</hui-accordion-trigger>
        <hui-accordion-content>Returns are accepted within 30 days.</hui-accordion-content>
      </hui-accordion-item>
      <hui-accordion-item value="support" disabled>
        <hui-accordion-trigger>Support</hui-accordion-trigger>
        <hui-accordion-content>Contact support for assistance.</hui-accordion-content>
      </hui-accordion-item>
    </hui-accordion>
  </section>

API reference

Root attributes

Attribute	Meaning
`type`	`single` (default) or `multiple`.
`value`	Open item value, or comma-separated open values for `multiple`.
`collapsible`	Allows a single open item to be closed.
`heading-level`	Optional heading wrapper `aria-level` for generated trigger buttons, from 1 through 6.

Item attributes

Attribute	Meaning
`value`	Stable item identifier used by the root value.
`open`	Item open-state mirror; normally managed by the root.
`disabled`	Disables its trigger and skips it during keyboard navigation.
`heading-level`	Per-item override for the generated trigger `aria-level`.

Events:

hui-value-change: emitted by the root with { value: string | undefined }.
hui-open-change: emitted by each item with { open: boolean }.

States and styling

State	Contract and styling guidance
Closed	Item and content use `data-state="closed"`; content has `hidden`.
Open	Item and content use `data-state="open"`; trigger has `aria-expanded="true"`.
Hover	Style the trigger with `--hui-color-interactive-hover`.
Active	Style the trigger with `--hui-color-interactive-active`.
Focus	Keep a visible focus ring using `--hui-color-focus-ring`.
Disabled	Trigger is natively disabled and marked `aria-disabled="true"`; navigation skips it.

State channel

Attributes are the source of truth. Style derived state with data-state, ARIA attributes, and the --hui-* token aliases.

Accessibility and keyboard support

Enter and Space toggle the focused trigger.
ArrowDown and ArrowUp move focus to the next or previous enabled trigger.
Home and End focus the first or last enabled trigger.
Printable keys use buffered typeahead (500ms) against trigger text.
Focus remains on the trigger after state changes.

SSR and forms

SSR emits every item, trigger, and content region. Open triggers have resolved aria-expanded="true"; closed content regions have hidden; generated IDs derive only from stable host id/value attributes. Without JavaScript, triggers remain native buttons and the server-rendered open/closed state is static. Consumers may remove or override hidden to expose all content in a no-JS presentation.

Code

<hui-accordion
  id="faq"
  type="single"
  value="shipping"
  aria-label="Frequently asked questions"
>
  <hui-accordion-item value="shipping">
    <hui-accordion-trigger>Shipping</hui-accordion-trigger>
    <hui-accordion-content>We ship worldwide.</hui-accordion-content>
  </hui-accordion-item>
  <hui-accordion-item value="returns">
    <hui-accordion-trigger>Returns</hui-accordion-trigger>
    <hui-accordion-content
      >Returns are accepted within 30 days.</hui-accordion-content
    >
  </hui-accordion-item>
</hui-accordion>

<hui-accordion id="playground-accordion" type="single" value="shipping" collapsible heading-level="3" aria-label="Shipping questions">
  <hui-accordion-item value="shipping">
    <hui-accordion-trigger>Shipping</hui-accordion-trigger>
    <hui-accordion-content>We ship worldwide with tracking included.</hui-accordion-content>
  </hui-accordion-item>
  <hui-accordion-item value="returns">
    <hui-accordion-trigger>Returns</hui-accordion-trigger>
    <hui-accordion-content>Returns are accepted within 30 days.</hui-accordion-content>
  </hui-accordion-item>
  <hui-accordion-item value="support" disabled>
    <hui-accordion-trigger>Support</hui-accordion-trigger>
    <hui-accordion-content>Contact support for assistance.</hui-accordion-content>
  </hui-accordion-item>
</hui-accordion>