Accordion

Used to show and hide sections of related content on a page

AI TipWant to skip the docs? Use the MCP Server

First Item

Second Item

Some value 2...

Third Item

Usage

import { Accordion } from "@chakra-ui/react"

<Accordion.Root>
  <Accordion.Item>
    <Accordion.ItemTrigger>
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Accordion.ItemBody />
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion.Root>

Examples

Controlled

Set the accordion that shows up by default.

Expanded: second-item

First Item

Second Item

Some value 2...

Third Item

With Icon

Here's an example of rendering a custom icon in each accordion item.

Product details

Product Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.

Stats

Expand Multiple Items

Use the multiple prop to allow multiple items to be expanded at once.

First Item

Second Item

Some value 2...

Third Item

Sizes

Use the size prop to change the size of the accordion.

First Item

Second Item

Some value 2...

Third Item

First Item

Second Item

Some value 2...

Third Item

First Item

Second Item

Some value 2...

Third Item

Variants

Use the variant prop to change the visual style of the accordion. Values can be either outline, subtle, enclosed or plain.

outline

First Item

Second Item

Some value 2...

Third Item

subtle

First Item

Second Item

Some value 2...

Third Item

enclosed

First Item

Second Item

Some value 2...

Third Item

plain

First Item

Second Item

Some value 2...

Third Item

Disabled Item

Pass the disabled prop to any Accordion.Item to prevent it from being expanded or collapsed.

First Item

Second Item

Some value 2...

Third Item

With Avatar

Here's an example of composing an accordion with an avatar.

Alex

Benji Top Rated

Charlie

With Subtext

Here's an example of adding a subtext to an accordion item.

First Item

Click to expand

Second Item

Click to expand

Third Item

Click to expand

With Actions

Here's an example of adding actions to an accordion item trigger.

First Item

Second Item

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Third Item

Styling Expanded Style

Pass the _open pseudo selector to the Accordion.ItemTrigger or Accordion.Item to attach styles to it when expanded.

First Item

Second Item

The trigger background changes to teal with white text when expanded.

Third Item

Guides

Accessing Root State

Use useAccordionContext to access the accordion state at the root level:

import { useAccordionContext } from "@chakra-ui/react"

const AccordionValueText = () => {
  const accordion = useAccordionContext()
  return <Box>Opened: {accordion.value.join(", ")}</Box>
}

// Usage
const Demo = () => (
  <Accordion.Root>
    <AccordionValueText />
    {/* ... accordion items */}
  </Accordion.Root>
)

Accessing Item State

Use useAccordionItemContext to access the state of a specific accordion item:

import { useAccordionItemContext } from "@chakra-ui/react"

const AccordionItemStatus = () => {
  const item = useAccordionItemContext()
  return (
    <Box color={item.open ? "green.500" : "gray.500"}>
      {item.open ? "Expanded" : "Collapsed"}
    </Box>
  )
}

// Usage
const Demo = () => (
  <Accordion.Root>
    <Accordion.Item value="item-1">
      <Accordion.ItemTrigger>
        <AccordionItemStatus />
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>
        <Accordion.ItemBody>Content</Accordion.ItemBody>
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>
)

Props

Root

Prop	Default	Type
`collapsible`	`false`	`boolean` Whether an accordion item can be closed after it has been expanded.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`multiple`	`false`	`boolean` Whether multiple accordion items can be expanded at the same time.
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` The orientation of the accordion items.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`outline`	`'outline' \| 'subtle' \| 'enclosed' \| 'plain'` The variant of the component
`size`	`md`	`'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`defaultValue`		`string[]` The initial value of the expanded accordion items. Use when you don't need to control the value of the accordion.
`disabled`		`boolean` Whether the accordion items are disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string item: (value: string) => string itemContent: (value: string) => string itemTrigger: (value: string) => string }>` The ids of the elements in the accordion. Useful for composition.
`onFocusChange`		`(details: FocusChangeDetails) => void` The callback fired when the focused accordion item changes.
`onValueChange`		`(details: ValueChangeDetails) => void` The callback fired when the state of expanded/collapsed accordion items changes.
`value`		`string[]` The controlled value of the expanded accordion items.

Item

Prop	Default	Type
`value` *		`string` The value of the accordion item.
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`disabled`		`boolean` Whether the accordion item is disabled.

Explorer

Explore the Accordion component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Product details

Product Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.

Stats

Component Anatomy

Hover to highlight, click to select parts

root

item

itemTrigger

itemContent

itemIndicator

itemBody

accordion.recipe.ts

Tooltip

Breadcrumb

Accordion

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Product details

Product details

Component Anatomy

Usage