---
title: 'Accordion'
type: 'component'
status: 'stable'
slug: /components/accordion/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/accordion'
typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx
---

Store longer content in sections users can open one at a time.

Keep the section titles short.

## Import

```jsx static=true
import { Accordion } from '@contentful/f36-components';
// or
import { Accordion } from '@contentful/f36-accordion';
```

## Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

### Basic usage

```jsx file=./examples/AccordionExample.tsx

```

### Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:

```jsx file=./examples/AccordionWithOtherComponentExample.tsx

```

### Controlled Accordion

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
But you can make it controlled by providing boolean value to `isExpanded` for Accordion.Item component

```jsx file=./examples/ControlledAccordion.tsx

```

## Props (API reference)

### Accordion

<PropsTable of="Accordion" />

### Accordion.Item

<PropsTable of="AccordionItem" />

## Content guidelines

- The title should be a short message that summarize the content of the accordion.
- Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
- When using headings, be mindful about the heading levels. The header is a Subheading with `h2` tag.

## Accessibility

- It allows keyboard navigation to open and close the accordions