---
title: HeadingGroup
description: >-
  Heading groups provide the document structure that accessibility technology
  uses to navigate the checkout.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/headinggroup
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/headinggroup.md
---

# HeadingGroup

Heading groups provide the document structure that accessibility technology uses to navigate the checkout. When you use a heading, any children related to that heading should be nested in a heading group. This ensures that any nested headings will use a semantically-appropriate heading level.

***

### Example

![headinggroup](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/headinggroup-BAA52Ci5.png)

##### JS

```ts
import {extend, HeadingGroup, Heading, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const headingGroup = root.createComponent(View, undefined, [
    root.createComponent(Heading, undefined, 'Hi John Doe! (h1)'),
    root.createComponent(HeadingGroup, undefined, [
      root.createComponent(Heading, undefined, 'Your account (h2)'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Change Password (h3)'),
      ]),
    ]),
  ]);

  root.appendChild(headingGroup);
});
```

##### React

```tsx
import {
  render,
  HeadingGroup,
  Heading,
  View,
} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <View>
      <Heading>Hi John Doe! (h1)</Heading>

      <HeadingGroup>
        <Heading>Your account (h2)</Heading>

        <HeadingGroup>
          <Heading>Change Password (h3)</Heading>
        </HeadingGroup>
      </HeadingGroup>
    </View>
  );
}
```

***