Visually Hidden

wwwwwwwwwwwwwwwwwww

Introduction

Installation

Releases

Compiler

Core

Tamagui

Extras

Guides

Community

Hide content thats visible to accessibility readers.

Features

Keeps content hidden on screen but visible to assistive tech.

Works with "space" prop to not disturb spacing.

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 space>
    <H1>Title</H1>

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

Unspaced

Feather Icons

Edit this page on GitHub.

Forms

Panels

Content

Visual

Etc

Features

Usage