Visually Hidden

Hides content from the screen in an accessible way.

Visually hides content while preserving it for assistive technology.

Anatomy

Import the component.

<script setup lang="ts">
import { AVisuallyHidden } from 'akar';
</script>

<template>
  <AVisuallyHidden>
    <slot />
  </AVisuallyHidden>
</template>

Basic example

Use the visually hidden primitive.

<script setup lang="ts">
import { GearIcon } from '@radix-icons/vue';
import { AVisuallyHidden } from 'akar';
</script>

<template>
  <button>
    <GearIcon />
    <AVisuallyHidden>Settings</AVisuallyHidden>
  </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 the current element should render as. Can be overwrite by `asChild`
`asChild`		`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.

Slot

Merges its props onto its immediate child.

useDateFormatter

Creates a wrapper around the `DateFormatter`, which is an improved version of the Intl.DateTimeFormat API, that is used internally by the various date builders to easily format dates in a consistent way.