---
title: "Legal Accordion — React"
canonical: https://sky-ui.cf.sky.com/sections/legal-accordion/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# Legal Accordion — React

Used for consistent presentation of legal information in expandable sections.

```js
import { Legal } from '@sky-uk/ui-sections';
```

### Example

The `Legal` accordion features predefined markdown rendering.

```tsx
function Example() {
  const [state, setState] = React.useState(null);

  const content = {
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    heading: 'Here’s the legal bit',
    body: `
# Heading 1

Based on your chosen *Sky Glass package*, you need a **10 Mb/s minimum download speed**. So [click here](http://sky.com) to confirm your selection.

## Heading 2
### Heading 3
#### Heading 4

- first item
- second item
- second item
- second item

[title](http://sky.com)
    `
  }

  const handleOpen = () => {
    setState(`Legal accordion just opened`);
  }

  const handleClose = () => {
    setState(`Legal accordion just closed`);
  }

  return (
    <>
      <Legal {...content} onOpen={handleOpen} onClose={handleClose} />
      <Text>{state}</Text>
    </>
  );
}
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- body: `string`
- data?: `object`
- heading: `string`
- onOpen?: `() => void`
- onClose?: `() => void`