JSPM

@chakra-ui/visually-hidden

2.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 390930
  • Score
    100M100P100Q198004F
  • License MIT

A React component that visually hides its content

Package Exports

  • @chakra-ui/visually-hidden
  • @chakra-ui/visually-hidden/package.json

Readme

@chakra-ui/visually-hidden

The visually hidden component styles itself so that it’s content is not visible, but it is available to assistive technologies like screen readers and other text to speech programs.

Installation

yarn add @chakra-ui/visually-hidden

# or

npm i @chakra-ui/visually-hidden

Import component

import { VisuallyHidden } from "@chakra-ui/visually-hidden"

Basic usage

// it renders a `span` by default
<VisuallyHidden>This content will be hidden on screen</VisuallyHidden>

// for visually hidden input fields
<VisuallyHiddenInput type="checkbox" defaultChecked/>

References