Skip to content
Home

VisuallyHidden

Info
Demos
Properties
Events

Demos

VisuallyHidden

before|hidden content|after

<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
<VisuallyHidden focusable>

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

</VisuallyHidden>

VisuallyHidden with example of use case

Read more about Eufemia
<Anchor href="/">

  Read more <VisuallyHidden>about Eufemia</VisuallyHidden>

</Anchor>

VisuallyHidden with custom element

but, not visible to you!

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 />

  </>,

)