---
title: Accordion (React) - USWDS + Tailwind
description: Use accordions to organize related content in expandable sections.
  Explore examples with headings, borders, and multiple open panels.
---

# Accordion

Use accordions to organize related content in expandable sections. Explore examples with headings, borders, and multiple open panels.

## Examples

### Default

```tsx
import { Accordion } from '@uswds-tailwind/react/accordion'

export default function AccordionDemo() {
  return (
    <Accordion.Root>
      <Accordion.Item value="one">
        <Accordion.ItemTrigger>
          First Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.ItemTrigger>
          Second Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="third">
        <Accordion.ItemTrigger>
          Third Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}
```

### With headings

Wrap each trigger in a heading when its panel represents a section of the page. Choose the heading level to fit the page structure.

```tsx
import { Accordion } from '@uswds-tailwind/react/accordion'

export default function AccordionHeadingsDemo() {
  return (
    <Accordion.Root>
      <Accordion.Item value="one">
        <h4>
          <Accordion.ItemTrigger>
            First Amendment
            <Accordion.ItemIndicator />
          </Accordion.ItemTrigger>
        </h4>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}
```

### Multiselectable

```tsx
import { Accordion } from '@uswds-tailwind/react/accordion'

export default function AccordionMultipleDemo() {
  return (
    <Accordion.Root multiple>
      <Accordion.Item value="one">
        <Accordion.ItemTrigger>
          First Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.ItemTrigger>
          Second Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="third">
        <Accordion.ItemTrigger>
          Third Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>
          <p className="leading-normal max-w-prose">No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}
```

### Bordered

```tsx
import { Accordion } from '@uswds-tailwind/react/accordion'

export default function AccordionBorderedDemo() {
  return (
    <Accordion.Root>
      <Accordion.Item value="one">
        <Accordion.ItemTrigger>
          First Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent className="border-b-4 border-x-4 border-gray-5">
          <p className="leading-normal max-w-prose">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.ItemTrigger>
          Second Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent className="border-b-4 border-x-4 border-gray-5">
          <p className="leading-normal max-w-prose">A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
      <Accordion.Item value="third">
        <Accordion.ItemTrigger>
          Third Amendment
          <Accordion.ItemIndicator />
        </Accordion.ItemTrigger>
        <Accordion.ItemContent className="border-b-4 border-x-4 border-gray-5">
          <p className="leading-normal max-w-prose">No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
        </Accordion.ItemContent>
      </Accordion.Item>
    </Accordion.Root>
  )
}
```

## Component API

Put each Item in Root, with its ItemTrigger and ItemContent inside the same item. Each item needs a unique, nonempty value. Wrap ItemTrigger in a heading when the panel introduces a section; choose the heading level for the page. ItemIndicator is optional.

### Root `<div>`

Provides the expanded values shared by its items. Native div props pass through, and its ref points to the root element.

| Prop | Type | Default | Description |
| - | - | - | - |
| `multiple` | `boolean` | `false` | Allows several items to remain expanded. |
| `defaultValue` | `string[]` | `[]` | Initially expanded item values for uncontrolled state. |
| `value` | `string[]` | `—` | Controlled expanded values; update this prop after a change callback. |
| `onValueChange` | `({ value: string[] }) => void` | `—` | Called when the expanded values change or a controlled change is requested. |
| `ids` | `{ root?: string; itemContent?: (value: string) => string; itemTrigger?: (value: string) => string }` | `—` | Overrides generated part IDs. Use Root IDs when a label or external control needs a stable input or trigger target. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-scope, data-part` | `accordion, root` | Select the root. |
| `data-multiple` | `Present when multiple is true` | Style multiple-item mode. |

### Item `<div>`

Groups a trigger and panel under one value.

| Prop | Type | Description |
| - | - | - |
| `value` | `string (required)` | Unique, nonempty value used in Root's expanded-value array. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-scope, data-part` | `accordion, item` | Select the item. |
| `data-state` | `open \| closed` | Style the open and closed states. |

### ItemTrigger `<button>`

Toggles its item's panel.

| Attribute | Value | Purpose |
| - | - | - |
| `data-scope, data-part` | `accordion, item-trigger` | Select the trigger. |
| `data-state` | `open \| closed` | Style the open and closed states. |

### ItemContent `<div>`

Contains the panel content. Closed panels are hidden.

| Attribute | Value | Purpose |
| - | - | - |
| `data-scope, data-part` | `accordion, item-content` | Select the panel. |
| `data-state` | `open \| closed` | Style the open and closed states. |

### ItemIndicator `<div>`

The default icon changes with the expanded state.

| Prop | Type | Description |
| - | - | - |
| `children` | `ReactNode \| (({ value, open }) => ReactNode)` | Replaces the default icon with content or a render function based on the item state. |

### Accessibility

Users can activate a focused trigger with Enter or Space. The component associates each trigger with its panel and hides closed panels. Provide meaningful trigger text and headings where appropriate.