Skip to content
Home

VisuallyHidden

Info
Demos
Properties

Demos

VisuallyHidden

before|hidden content|after

Code Editor
<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.

Hidden, but focusable content
Code Editor
<VisuallyHidden focusable>
  <Anchor href="/">Hidden, but focusable content</Anchor>
</VisuallyHidden>

VisuallyHidden with example of use case

Read more about Eufemia
Code Editor
<Anchor href="/">
  Read more <VisuallyHidden>about Eufemia</VisuallyHidden>
</Anchor>

VisuallyHidden with custom element

Code Editor
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 />
    <VisuallyHidden aria-label="I'm a region" element={Section}>
      <P>but, not visible to you!</P>
    </VisuallyHidden>
    <BoxAfter />
  </>,
)

ReferenceError: BoxBefore is not defined