Accordion

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

accordion-demo.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.

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

accordion-headings-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

accordion-multiple-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

accordion-bordered-demo.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.

Accordion

Examples

Default

With headings

First Amendment

Multiselectable

Bordered

Component API

Root<div>

Item<div>

ItemTrigger<button>

ItemContent<div>

ItemIndicator<div>

Accessibility

Root`<div>`

Item`<div>`

ItemTrigger`<button>`

ItemContent`<div>`

ItemIndicator`<div>`