Visually Hidden

VisuallyHidden hides an item but ensures it remains visible to accessibility readers.

<Highlights features={[ 'Keeps content hidden on screen but visible to assistive tech.', 'Works with "space" prop to not disturb spacing.', ]} />

Installation

VisuallyHidden is already installed in tamagui, or you can install it independently:

npm install @tamagui/visually-hidden

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { Text, VisuallyHidden } from 'tamagui'

export default () => (
  <VisuallyHidden>
    <Text>Add annotations here</Text>
  </VisuallyHidden>
)

When using with the space property, it will avoid double-spacing:

import { H1, Text, VisuallyHidden, YStack } from 'tamagui'

export default () => (
  <YStack gap="$4">
    <H1>Title</H1>

    <VisuallyHidden>
      <Text>Add annotations here</Text>
    </VisuallyHidden>
  </YStack>
)