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 'radix-vue'
</script>
<template>
<VisuallyHidden>
<slot />
</VisuallyHidden>
</template>
Basic example
Use the visually hidden primitive.
vue
<script setup lang="ts">
import { VisuallyHidden } from 'radix-vue'
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.
Prop | Default | Type |
---|---|---|
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
.