import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
const Demo = () => {
return (
<AccordionRoot collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
)
}
Setup
If you don't already have the snippet, run the following command to add the
accordion
snippet
chakra snippet add accordion
The snippet includes a closed component composition for the Accordion
component.
Usage
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
<AccordionRoot>
<AccordionItem>
<AccordionItemTrigger />
<AccordionItemContent />
</AccordionItem>
</AccordionRoot>
Examples
Controlled
Set the accordion that shows up by default.
"use client"
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
import { useState } from "react"
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
const Demo = () => {
const [value, setValue] = useState(["b"])
return (
<AccordionRoot value={value} onValueChange={(e) => setValue(e.value)}>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
)
}
With Icon
Use the AccordionItemIcon
to add an icon to each accordion item.
Product details
import { Heading, Stack } from "@chakra-ui/react"
import {
AccordionItem,
AccordionItemContent,
AccordionItemIcon,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
import { LuBarChart, LuTags } from "react-icons/lu"
const Demo = () => {
return (
<Stack width="full" maxW="400px">
<Heading size="md">Product details</Heading>
<AccordionRoot collapsible defaultValue={["info"]}>
{items.map((item) => (
<AccordionItem key={item.value} value={item.value}>
<AccordionItemTrigger>
<AccordionItemIcon>{item.icon}</AccordionItemIcon>
{item.title}
</AccordionItemTrigger>
<AccordionItemContent>{item.content}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
</Stack>
)
}
const items = [
{
value: "info",
icon: <LuTags />,
title: "Product Info",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.",
},
{
value: "stats",
icon: <LuBarChart />,
title: "Stats",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.",
},
]
Expand Multiple Items
Use the multiple
prop to allow multiple items to be expanded at once.
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
const Demo = () => {
return (
<AccordionRoot multiple defaultValue={["b"]}>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
)
}
Sizes
Use the size
prop to change the size of the accordion.
sm
md
lg
import { For, Stack, Text } from "@chakra-ui/react"
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg"]}>
{(size) => (
<Stack gap="2">
<Text fontWeight="semibold">{size}</Text>
<AccordionRoot
size={size}
key={size}
collapsible
defaultValue={["b"]}
>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
</Stack>
)}
</For>
</Stack>
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
Variants
Use the variant
prop to change the visual style of the accordion. Values can
be either outline
, elevated
, contained
or plain
.
outline
subtle
enclosed
plain
import { For, Stack, Text } from "@chakra-ui/react"
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
const Demo = () => {
return (
<Stack gap="8">
<For each={["outline", "subtle", "enclosed", "plain"]}>
{(variant) => (
<Stack gap="2">
<Text fontWeight="semibold">{variant}</Text>
<AccordionRoot
variant={variant}
key={variant}
collapsible
defaultValue={["b"]}
>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
</Stack>
)}
</For>
</Stack>
)
}
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
Disabled Item
Pass the disabled
prop to disable an accordion item to prevent it from being
expanded or collapsed.
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "@/components/ui/accordion"
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3...", disabled: true },
]
const Demo = () => {
return (
<AccordionRoot collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<AccordionItem key={index} value={item.value} disabled={item.disabled}>
<AccordionItemTrigger>{item.title}</AccordionItemTrigger>
<AccordionItemContent>{item.text}</AccordionItemContent>
</AccordionItem>
))}
</AccordionRoot>
)
}
Manual
Here's how to setup the accordion without using the snippet.
import { Accordion } from "@chakra-ui/react"
const items = [
{ value: "a", title: "First Item", text: "Some value 1..." },
{ value: "b", title: "Second Item", text: "Some value 2..." },
{ value: "c", title: "Third Item", text: "Some value 3..." },
]
const Demo = () => {
return (
<Accordion.Root collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
{item.title}
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</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 multple 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' | 'accent' 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 |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | string[] The initial value of the accordion when it is first rendered. Use when you do not need to control the state 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 `value` of the accordion items that are currently being expanded. |
Item
Prop | Default | Type |
---|---|---|
value * | string The value of the accordion item. | |
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. |