Accordion

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.

With Icon

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

Expand Multiple Items

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

Sizes

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

Variants

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

Disabled Item

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

With Avatar

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

With Subtext

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

With Actions

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

Styling Expanded Style

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

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

Item

Explorer

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