---
name: Accordion
menu: Components
---
import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import Accordion from './Accordion'
import Text from '../Text/Text'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
# Accordion
### Try it out
export const code = `
My header
Accordion Content Goes Here
`
## Best practices
- If you need to group accordions together, make sure to place them inside the `Accordion.Provider` component, as it provides the keyboard accessibility features
for groups of accordions.
## Basic usage
You can use a single Accordion by itself:
```jsx
import React from 'react'
import { Accordion, Text } from '@repay/cactus-web'
const SingleAccordion = props => {
return (
My Header
Accordion Content Goes Here
)
}
```
### Accordion Provider
You can also use `Accordion.Provider` to display multiple Accordions at the same time. The provider
will manage the focus for you in an accessible way and allows for both controlled and uncontrolled
management of open/closed state.
To use a controlled provider, be sure to give each of your Accordions an `id` prop. You can
then pass in an array of IDs to the `openId` prop of the provider. You'll also want to pass an
`onChange` handler to respond to the toggling of Accordions.
If you'd rather use an uncontrolled provider, you won't need to pass in an `openId` prop, as the
provider will manage the open/closed state for you. You can set the maximum number of Accordions
that can be open at the same time using the `maxOpen` prop, which defaults to 1. You can also pass
`defaultOpen={true}` to any `Accordion` that you'd like to initialize in an open state.
Controlled Example:
```jsx
const ControlledAccordions = () => {
const [open, setOpen] = useState(['accordion2'])
const toggleAccordion = (toggleId: string) => {
setOpen((currentOpen) => {
if (currentOpen.includes(toggleId)) {
return currentOpen.filter((id) => id !== toggleId)
}
return [...currentOpen, toggleId]
})
}
return (
My Header 1
Accordion Content Goes Here
My Header 2
I default to open because "openId" was initialized with my ID.
My Header 3
Accordion Content Goes Here
)
}
```
Uncontrolled Example:
```jsx
import React from 'react'
import { Accordion, Text } from '@repay/cactus-web'
const MultipleAccordions = props => {
return (
My Header 1
Accordion Content Goes Here
My Header 2
I default to open because "defaultOpen" was set to true.
My Header 3
Accordion Content Goes Here
)
}
```
### Outline Variant
We have included an `outline` variant which can be used to better depict hierarchical structures as well as separations in the page.
Usage:
```jsx
import React from 'react'
import { Accordion, Text } from '@repay/cactus-web'
const OutlineAccordion = props => {
return (
Example Header
Example Content
)
}
```
### Render Prop
To allow further customization of the accordions, we've provided the option to pass a render function to the header. This function receives an object
which includes a variable indicating whether or not the accordion is open, as well as an id that can be placed on whichever element describes the accordion.
Usage:
```jsx
import React, { useState } from 'react'
import { Accordion, IconButton, Text } from '@repay/cactus-web'
import { ActionsDelete, NavigationCircleDown, NavigationCircleUp } from '@repay/cactus-icons'
const initialAccordions = [
{
header: 'Header 1',
body: 'Body 1'
},
{
header: 'Header 2'
body: 'Body 2'
}
]
const CustomAccordions = props => {
const [accordions, setAccordions] = useState(initialAccordions)
const handleUpClick = index => {
accordionsCopy = [...accordions]
const temp = accordionsCopy[index - 1]
accordionsCopy[index - 1] = accordionsCopy[index]
accordionsCopy[index] = temp
setAccordions(accordionsCopy)
}
const handleDownClick = index => {
accordionsCopy = [...accordions]
const temp = accordionsCopy[index + 1]
accordionsCopy[index + 1] = accordionsCopy[index]
accordionsCopy[index] = temp
setAccordions(accordionsCopy)
}
const handleDelete = index => {
const accordionsCopy = [...accordions]
accordionsCopy.splice(index, 1)
setAccordions(accordionsCopy)
}
return (
{accordions.map((acc, index) => (
render={({ isOpen, headerId }) => (
)} />
))}
)
}
```
## Properties
## Accordion
## Accordion Header
## Accordion Body
## Accordion Provider