---
title: "Accordion — React"
canonical: https://sky-ui.cf.sky.com/components/accordion/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Accordion — React

Accordions allow users to expand and collapse pieces of content.

```js
import { Accordion } from '@sky-uk/ui-core';
```

---

```tsx
<Accordion id="example-intro">
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>Content area</Accordion.Content>
</Accordion>
```

---

## Props

### id

The `id` attribute sets the appropriate `aria` attributes to provide semantic relationship between the Heading and Content.

```jsx
<Accordion id="example-id">
```

**Important:** The **`id`** is essential for the Accordion to function correctly and must be a unique value when
  multiple Accordions are used on a page.

### $isOpen

Set the initial state of the Accordion.

```tsx
<Accordion id="example-is-open" $isOpen>
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>
```

### $headingLevel

The `$headingLevel` prop allows you to set the heading level of the Accordion. This is useful for accessibility and SEO purposes.

```tsx
<Accordion id="example-heading-level">
  <Accordion.Heading $headingLevel="h2">Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>
```

### $thumbnailSrc

The `$thumbnailSrc` prop allows you to set a thumbnail image for the Accordion heading.

```tsx
<Box $boxShadow={1} $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-thumbnail">
    <Accordion.Heading $thumbnailSrc="https://placehold.co/40x40">Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>
```

---

## Subcomponents

- `Accordion.Heading` - the heading accepts `onBlur`, `onFocus`, `onMouseEnter` and `onMouseLeave` to trigger additional actions.
- `Accordion.Content` - container for content which handles the open/closed state.

---

## Callbacks

The `onOpen` and `onClose` callbacks can be used to trigger additional actions when the Accordion is opened or closed.

```tsx
function Example() {
  const [callback, setCallback] = React.useState('nothing');

  const handleOpen = () => {
    setCallback('opened');
  }

  const handleClose = () => {
    setCallback('closed');
  }

  return (
    <Flex $flexDirection="column" $gap={5}>
        <Accordion id="example-callbacks" onOpen={handleOpen} onClose={handleClose}>
          <Accordion.Heading>Heading</Accordion.Heading>
          <Accordion.Content>Content goes here.</Accordion.Content>
        </Accordion>
      <Text>The last callback was {callback}</Text>
    </Flex>
  )
}
```

---

## Presentation

Some designs call for an `Accordion` with container styles applied. You can achieve this by wrapping the `Accordion` inside of a `Box` component as demonstrated below.

### Bordered

```tsx
<Box $border $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-bordered">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>
```

### Drop Shadow

```tsx
<Box $boxShadow={1} $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-drop-shadow">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>
```

---

## System Modifiers

The `Accordion` component also supports the props applied using the following system modifiers:

- [margin](/core/system/margin/)
- [width](/core/system/width/)