Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Default

Only one panel is open at a time. Setting collapsible allows the open panel to be closed again.

Hummingbird UI is a class-based design system. Components ship their looks as semantic CSS classes and use Radix UI primitives for behavior.

tsx

import { Accordion } from "@hummingbirdui/react";

export default function AccordionDefault() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="mx-auto max-w-2xl"
    >
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>What is Hummingbird UI?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. The Accordion is built on Radix UI&apos;s headless primitive, so
          keyboard navigation and ARIA wiring are handled for you.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-3">
        <Accordion.Header>
          <Accordion.Trigger>Can multiple panels stay open?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Use <code>type=&quot;multiple&quot;</code> to let several items expand
          at once, or <code>type=&quot;single&quot;</code> with{" "}
          <code>collapsible</code> to allow closing the open item.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Multiple

Use type="multiple" to let any number of panels stay open at once.

tsx

import { Accordion } from "@hummingbirdui/react";

export default function AccordionMultiple() {
  return (
    <Accordion type="multiple" className="mx-auto max-w-2xl">
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>What is Hummingbird UI?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Header>
          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. The Accordion is built on Radix UI&apos;s headless primitive, so
          keyboard navigation and ARIA wiring are handled for you.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-3">
        <Accordion.Header>
          <Accordion.Trigger>Can multiple panels stay open?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Yes. With <code>type=&quot;multiple&quot;</code> every panel toggles
          independently, so any number of them can be open at the same time.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Disabled

Add disabled to an Accordion.Item to prevent it from opening, or to the Accordion root to disable every item.

Hummingbird UI is a class-based design system. Components ship their looks as semantic CSS classes and use Radix UI primitives for behavior.

tsx

import { Accordion } from "@hummingbirdui/react";

export default function AccordionDisabled() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="mx-auto max-w-2xl"
    >
      <Accordion.Item value="item-1">
        <Accordion.Header>
          <Accordion.Trigger>What is Hummingbird UI?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2" disabled>
        <Accordion.Header>
          <Accordion.Trigger>This item is disabled</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          You won&apos;t be able to open this panel.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

API Reference

Built on the Radix UI Accordion primitive. Each part forwards all props to its Radix counterpart.

Accordion

Contains all the parts of an accordion.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`function`	—
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	—
`collapsible`	`boolean`	`false`
`disabled`	`boolean`	`false`
`dir`	`enum`	`"ltr"`
`orientation`	`enum`	`"vertical"`
`className`	`string`	—

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Accordion.Item

Contains all the parts of a collapsible section.

Prop	Type	Default
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`value*`	`string`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Accordion.Header

Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Accordion.Trigger

Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Accordion.Content

Contains the collapsible content for an item.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS Variable	Description
`--radix-accordion-content-width`	The width of the content when it opens/closes.
`--radix-accordion-content-height`	The height of the content when it opens/closes.

Styling

Hummingbird React accordion is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available accordion classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousOverview NextAlert