Reka UI logoReka
backdrop
Utilities

Visually Hidden

Hides content from the screen in an accessible way.
  • Visually hides content while preserving it for assistive technology.

Anatomy

Import the component.

vue
<script setup lang="ts">
import { VisuallyHidden } from 'reka-ui'
</script>

<template>
  <VisuallyHidden>
    <slot />
  </VisuallyHidden>
</template>

Basic example

Use the visually hidden primitive.

vue
<script setup lang="ts">
import { VisuallyHidden } from 'reka-ui'
import { GearIcon } from '@radix-icons/vue'
</script>

<template>
  <button>
    <GearIcon />
    <VisuallyHidden>Settings</VisuallyHidden>
  </button>
</template>

API Reference

Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

PropDefaultType
as
span
string | Component

The element or component this component should render as. Can be overwrite by asChild

asChild
false
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.