---
title: VisuallyHidden
description: >-
  Use when an element needs to be available to assistive technology (for
  example, a screen reader) but otherwise hidden.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/visuallyhidden
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/visuallyhidden.md
---

# VisuallyHidden

Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.

##### JS

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

extend('Checkout::PostPurchase::Render', (root) => {
  const visuallyHidden = root.createComponent(
    VisuallyHidden,
    undefined,
    'Visually hidden content although available to assistive technology',
  );

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

##### React

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

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

function App() {
  return (
    <VisuallyHidden>
      Visually hidden content although available to assistive technology
    </VisuallyHidden>
  );
}
```

***