GitHub
TamaguiTailwind

Visually Hidden

Hide content accessibly

VisuallyHidden removes content from the visual layout while keeping it available to assistive technology.

Features

  • Visually hidden content available to assistive technology

  • Spacing preserved with the space prop

Installation

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

yarn add @tamagui/visually-hidden

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { VisuallyHidden } from 'tamagui';

import { html } from "@tamagui/tailwind";

export default () => <VisuallyHidden>

    <html.span>Add annotations here</html.span>

  </VisuallyHidden>;

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

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

import { html } from "@tamagui/tailwind";

export default () => <YStack space>

    <H1>Title</H1>



    <VisuallyHidden>

      <html.span>Add annotations here</html.span>

    </VisuallyHidden>

  </YStack>;

Previous

Portal

Next

LinearGradient

Edit this page on GitHub.