VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.


Chakra UI exports 2 components for the VisuallyHidden.

VisuallyHidden: Visually hidden span component used to hide elements on screen. VisuallyHiddenInput: Visually hidden input component used for designing custom input components using the html input as a proxy

import { VisuallyHidden, VisuallyHiddenInput } from '@chakra-ui/react'


VisuallyHidden Example#

It is used to visually hide an element but to make it accessible for screen-readers. It renders html <span> as a proxy.

function Example() {
return (
<CheckIcon />

Another Example with VisuallyHidden#

function Example() {
return (
<Heading>Title and description</Heading>
<VisuallyHidden>This will be hidden</VisuallyHidden>

VisuallyHiddenInput Example#

It renders html <input> as a proxy.

function Example() {
return (
onChange={(event) => {


VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.


VisuallyHidden components doesn't have any custom props.

childrenReact.ReactNodeThe content to be hidden visually

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel