# Visually Hidden (/components/layout/visually-hidden)



Use `VisuallyHidden` to hide content from sight. The content stays in the accessibility tree and the
document flow. Screen readers still announce it, and `aria-labelledby` or `aria-describedby` can
reference it. Unlike `display: none` or the `hidden` attribute, `VisuallyHidden` does not remove the
content from assistive technology.

Reach for it when the interface conveys meaning visually but needs a text equivalent. Examples
include a label behind an icon-only control, extra context for a link, and a status message inside a
live region.

apps/docs/src/examples/visually-hidden/basic.tsx

```tsx
import { VisuallyHidden } from '@luke-ui/react/visually-hidden';

export default () => {
	return (
		<p>
			<span aria-hidden="true">★★★★☆</span>
			<VisuallyHidden> Rated 4 out of 5 stars</VisuallyHidden>
		</p>
	);
};
```

## Render a different element [#render-a-different-element]

By default `VisuallyHidden` renders a `span`. Pass `elementType` to render a different element, such
as a semantic heading, `label`, or list item. `VisuallyHidden` keeps the hidden styles on that
element.

```tsx
<VisuallyHidden elementType="h2">Search results</VisuallyHidden>
```

## API [#api]

<ComponentPropsTable
  id="type-table-visually-hidden.tsx-VisuallyHiddenProps"
  type="{
  &#x22;id&#x22;: &#x22;visually-hidden.tsx-VisuallyHiddenProps&#x22;,
  &#x22;name&#x22;: &#x22;VisuallyHiddenProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for `VisuallyHidden`.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;render&#x22;,
      &#x22;description&#x22;: &#x22;Overrides the default DOM element with a custom render function.\nThis allows rendering existing components with built-in styles and behaviors\nsuch as router links, animation libraries, and pre-styled components.\n\nRequirements:\n\n- You must render the expected element type (e.g. if `<button>` is expected, you cannot render an\n  `<a>`).\n- Only a single root DOM element can be rendered (no fragments).\n- You must pass through props and ref to the underlying DOM element, merging with your own prop\n  as appropriate.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;DOMRenderFunction<any, any> | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;DOMRenderFunction<any, any>&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;elementType&#x22;,
      &#x22;description&#x22;: &#x22;Renders a different element type in place of the default. Use it to choose a semantic element\nwithout changing the visual or accessibility treatment.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;string | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;string&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`VisuallyHiddenProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>