---
title: HeadingGroup
description: >-
  Heading group controls the heading level of headings nested within it, like
  H1, H2, H3.


  Use a heading group whenever you use a heading to ensure the experience is the
  same for screen reader users. When using a heading, any children related to
  that heading should be nested within the same heading group.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/titles-and-text/headinggroup
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/titles-and-text/headinggroup.md
---

# Heading​Group

Heading group controls the heading level of headings nested within it, like H1, H2, H3.

Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.

### Examples

* #### Basic HeadingGroup

  ##### React

  ```tsx
  import {
    reactExtension,
    HeadingGroup,
    Heading,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <>
        <Heading>Heading <h1></Heading>

        <HeadingGroup>
          <Heading>Heading <h2></Heading>

          <HeadingGroup>
            <Heading>Heading <h3></Heading>
          </HeadingGroup>
        </HeadingGroup>
      </>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    HeadingGroup,
    Heading,
    View,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const headingGroup = root.createComponent(View, undefined, [
      root.createComponent(Heading, undefined, 'Heading <h1>'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Heading <h2>'),
        root.createComponent(HeadingGroup, undefined, [
          root.createComponent(Heading, undefined, 'Heading <h3>'),
        ]),
      ]),
    ]);

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/headinggroup-default.png)

## Best Practices

* Use this component to create a content hierarchy within the document outline.

## Related

[Component - Heading](heading)

[Component - Text](text)

[Component - TextBlock](textblock)