# Accordion
Divide content into collapsible sections.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Default() {
// Attribution: https://www.healthline.com/health/fun-facts-about-the-skeletal-system#8-More-than-half-your-bones-are-in-your-hands-and-feet
const content = [
{
id: '001',
title: 'Your skeleton is made of more than 200 bones',
description:
'Inside your body are 206 bones. Each bone plays a very important role in making all the mechanics of your body function properly. If a bone is broken, all the bones around it can’t perform their duty properly.',
},
{
id: '002',
title: 'The smallest bone in the body is in your ear',
description:
'The stapes, a bone in your inner ear, is the smallest of all your bones. This bone is also sometimes called the stirrup because of its Y shape. Together with the anvil and hammer bones, the stapes helps translate sounds you hear into waves your brain can understand.',
},
{
id: '003',
title: 'One bone isn’t connected to any other bones',
description:
'The hyoid bone, which is in your throat, is the only bone that doesn’t connect to a joint. The hyoid is responsible for holding your tongue in place.',
},
];
return (
{content.map((item) => (
{item.title}
{item.description}
))}
);
}
```
## Controlled
Use `value` and `onValueChange` to control the value of the Accordion.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Controlled() {
const [value, setValue] = useState(['1']);
return (
setValue(details.value)}>
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Indicator
Add an indicator to the trigger with `Accordion.ItemIndicator`.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
import { MinusIcon, PlusIcon } from 'lucide-react';
export default function Indicator() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Collapsible
By default you can't close open items. Adding `collapsible` changes this behavior.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Collapsible() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Multiple
Adding `multiple` allows items to open independently.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Multiple() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Orientation
Use the `orientation` prop to change the layout direction of the Accordion.
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Orientation() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## Direction
```tsx
import { Accordion } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
{['1', '2', '3'].map((item) => (
Item {item}
Content for item {item}
))}
);
}
```
## API Reference
| Property | Default | Type |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ids | - | Partial\<\{ root: string; item: (value: string) => string; itemContent: (value: string) => string; itemTrigger: (value: string) => string; }> \| undefined — The ids of the elements in the accordion. Useful for composition. |
| multiple | false | boolean \| undefined — Whether multiple accordion items can be expanded at the same time. |
| collapsible | false | boolean \| undefined — Whether an accordion item can be closed after it has been expanded. |
| value | - | string\[] \| undefined — The controlled value of the expanded accordion items. |
| defaultValue | - | string\[] \| undefined — The initial value of the expanded accordion items.
Use when you don't need to control the value of the accordion. |
| disabled | - | boolean \| undefined — Whether the accordion items are disabled |
| onValueChange | - | ((details: ValueChangeDetails) => void) \| undefined — The callback fired when the state of expanded/collapsed accordion items changes. |
| onFocusChange | - | ((details: FocusChangeDetails) => void) \| undefined — The callback fired when the focused accordion item changes. |
| orientation | "vertical" | "horizontal" \| "vertical" \| undefined — The orientation of the accordion items. |
| dir | "ltr" | "ltr" \| "rtl" \| undefined — The document's text/writing direction. |
| getRootNode | - | (() => ShadowRoot \| Node \| Document) \| undefined — A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| value | - | AccordionApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (accordion: AccordionApi\) => ReactNode |
| value | - | string — The value of the accordion item. |
| disabled | - | boolean \| undefined — Whether the accordion item is disabled. |
| children | - | ReactNode |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | ReactNode |
| element | - | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined — Render the element yourself |
| children | - | ReactNode |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | ReactNode |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |