import { Accordion, Span } from "@chakra-ui/react"
const Demo = () => {
return (
<Accordion.Root collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
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..." },
]
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
"use client"
import { Accordion, Span, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"
const Demo = () => {
const [value, setValue] = useState(["second-item"])
return (
<Stack gap="4">
<Text fontWeight="medium">Expanded: {value.join(", ")}</Text>
<Accordion.Root value={value} onValueChange={(e) => setValue(e.value)}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
</Stack>
)
}
const items = [
{ value: "first-item", title: "First Item", text: "Some value 1..." },
{ value: "second-item", title: "Second Item", text: "Some value 2..." },
{ value: "third-item", title: "Third Item", text: "Some value 3..." },
]
With Icon
Here's an example of rendering a custom icon in each accordion item.
Product details
import { Accordion, Heading, Icon, Stack } from "@chakra-ui/react"
import { LuChartBarStacked, LuTags } from "react-icons/lu"
const Demo = () => {
return (
<Stack width="full" maxW="400px">
<Heading size="md">Product details</Heading>
<Accordion.Root collapsible defaultValue={["info"]}>
{items.map((item) => (
<Accordion.Item key={item.value} value={item.value}>
<Accordion.ItemTrigger>
<Icon fontSize="lg" color="fg.subtle">
{item.icon}
</Icon>
{item.title}
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.content}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
</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: <LuChartBarStacked />,
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 { Accordion, Span } from "@chakra-ui/react"
const Demo = () => {
return (
<Accordion.Root multiple defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
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..." },
]
Sizes
Use the size
prop to change the size of the accordion.
sm
md
lg
import { Accordion, For, Span, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<For each={["sm", "md", "lg"]}>
{(size) => (
<Stack gap="2" key={size}>
<Text fontWeight="semibold">{size}</Text>
<Accordion.Root size={size} collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
</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
, subtle
, enclosed
or plain
.
outline
subtle
enclosed
plain
import { Accordion, For, Span, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<For each={["outline", "subtle", "enclosed", "plain"]}>
{(variant) => (
<Stack gap="2" key={variant}>
<Text fontWeight="semibold">{variant}</Text>
<Accordion.Root variant={variant} collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
</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 any Accordion.Item
to prevent it from being
expanded or collapsed.
import { Accordion, Span } from "@chakra-ui/react"
const Demo = () => {
return (
<Accordion.Root collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value} disabled={item.disabled}>
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
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 },
]
With Avatar
Here's an example of composing an accordion with an avatar.
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.
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.
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.
import { Accordion, Avatar, Badge, HStack } from "@chakra-ui/react"
import { LuTrophy } from "react-icons/lu"
import { LoremIpsum } from "react-lorem-ipsum"
const Demo = () => {
return (
<Accordion.Root collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.name}>
<Accordion.ItemTrigger>
<Avatar.Root shape="rounded">
<Avatar.Image src={item.image} />
<Avatar.Fallback name={item.name} />
</Avatar.Root>
<HStack flex="1">
{item.name}{" "}
{item.topRated && (
<Badge colorPalette="green">
<LuTrophy />
Top Rated
</Badge>
)}
</HStack>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.bio}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
const items = [
{
name: "Alex",
bio: <LoremIpsum />,
image: "https://i.pravatar.cc/150?u=a",
topRated: false,
},
{
name: "Benji",
bio: <LoremIpsum />,
image: "https://i.pravatar.cc/150?u=b",
topRated: true,
},
{
name: "Charlie",
bio: <LoremIpsum />,
image: "https://i.pravatar.cc/150?u=c",
topRated: false,
},
]
With Subtext
Here's an example of adding a subtext to an accordion 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.
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.
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.
import { Accordion, Stack, Text } from "@chakra-ui/react"
import { LoremIpsum } from "react-lorem-ipsum"
const items = [
{ value: "a", title: "First Item", text: <LoremIpsum p={1} /> },
{ value: "b", title: "Second Item", text: <LoremIpsum p={1} /> },
{ value: "c", title: "Third Item", text: <LoremIpsum p={1} /> },
]
const Demo = () => {
return (
<Accordion.Root collapsible>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Accordion.ItemTrigger>
<Stack gap="1">
<Text>{item.title}</Text>
<Text fontSize="sm" color="fg.muted">
Click to expand
</Text>
</Stack>
</Accordion.ItemTrigger>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
With Actions
Here's an example of adding actions to an accordion item trigger.
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.
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.
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.
import { AbsoluteCenter, Accordion, Box, Button, Span } from "@chakra-ui/react"
import LoremIpsum from "react-lorem-ipsum"
const Demo = () => {
return (
<Accordion.Root spaceY="4" variant="plain" collapsible defaultValue={["b"]}>
{items.map((item, index) => (
<Accordion.Item key={index} value={item.value}>
<Box position="relative">
<Accordion.ItemTrigger>
<Span flex="1">{item.title}</Span>
<Accordion.ItemIndicator />
</Accordion.ItemTrigger>
<AbsoluteCenter axis="vertical" insetEnd="0">
<Button variant="subtle" colorPalette="blue">
Action
</Button>
</AbsoluteCenter>
</Box>
<Accordion.ItemContent>
<Accordion.ItemBody>{item.text}</Accordion.ItemBody>
</Accordion.ItemContent>
</Accordion.Item>
))}
</Accordion.Root>
)
}
const items = [
{ value: "a", title: "First Item", text: <LoremIpsum /> },
{ value: "b", title: "Second Item", text: <LoremIpsum /> },
{ value: "c", title: "Third Item", text: <LoremIpsum /> },
]
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 |
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. |