@dnb/eufemia/docs/uilib/components/visually-hidden.md

DNB Eufemia Design System UI Library

---
title: 'VisuallyHidden'
description: 'Use VisuallyHidden to keep helpful text available to screen readers but hidden visually.'
version: 11.8.2
generatedAt: 2026-07-03T14:39:19.215Z
checksum: 04379dde0690518a2fc76a24effa77b9dc53bb2dbbf2bc55765063299a7adf41
---

# VisuallyHidden

## Import

```tsx
import { VisuallyHidden } from '@dnb/eufemia'
```

## Description

`VisuallyHidden` is a utility component that can be used to hide its children visually while keeping them visible to screen readers and other assistive technology. It uses the global helper class `.dnb-sr-only` under the hood.

**NOTE:** Many semantic elements, such as button elements, have meaning to assistive devices and browsers that provide context for the user and, in many cases, provide or restrict interactive behaviors. Use caution when overriding our defaults and make sure that the element you choose to render provides the same experience for all users. In short, the component shouldn't be used to hide interactive content.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/visually-hidden)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden)

## Related components

VisuallyHidden is part of the [Content](/uilib/components/overview/#content) category. Other components for similar needs:

- [Accordion](/uilib/components/accordion/) – to let people open and close sections of related content.
- [Avatar](/uilib/components/avatar/) – to make a person, company, or profile easier to recognize.
- [Card](/uilib/components/card/) – to group related content in a clear, separated area.
- [CountryFlag](/uilib/components/country-flag/) – to show a country by its flag from an ISO country code.
- [DateFormat](/uilib/components/date-format/) – to show dates in the correct DNB format.
- [Heading](/uilib/components/heading/) – to create accessible page headings with the correct level.

[See all in Content](/uilib/components/overview/#content)

## Demos

### VisuallyHidden

```tsx
render(
  <P>
    <span>before|</span>
    <VisuallyHidden>hidden content</VisuallyHidden>
    <span>|after</span>
  </P>
)
```

### VisuallyHidden with focusable content

Use `VisuallyHidden` with `focusable={true}` to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). The container will be displayed when any child element of the container receives focus.

```tsx
render(
  <VisuallyHidden focusable>
    <Anchor href="/">Hidden, but focusable content</Anchor>
  </VisuallyHidden>
)
```

### VisuallyHidden with example of use case

```tsx
render(
  <Anchor href="/">
    Read more <VisuallyHidden>about Eufemia</VisuallyHidden>
  </Anchor>
)
```

### VisuallyHidden with custom element

```tsx
const Box = styled.div`
  width: 1rem;
  height: 1rem;
`
const BoxBefore = styled(Box)`
  background-color: var(--color-summer-green);
`
const BoxAfter = styled(Box)`
  background-color: var(--color-emerald-green);
`
render(
  <>
    <BoxBefore />
    {/* @ts-expect-error -- strictFunctionTypes */}
    <VisuallyHidden aria-label="I'm a region" element={Section}>
      <P>but, not visible to you!</P>
    </VisuallyHidden>
    <BoxAfter />
  </>
)
```

## Properties

```json
{
  "props": {
    "focusable": {
      "doc": "Set to `true` to hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "element": {
      "doc": "Custom root HTML element for the component. Defaults to `<span>`.",
      "type": ["string", "React.Element"],
      "status": "optional"
    }
  }
}
```