var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),x=(i,e)=>{for(var d in e)t(i,d,{get:e[d],enumerable:!0})},a=(i,e,d,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of p(e))!y.call(i,l)&&l!==d&&t(i,l,{get:()=>e[l],enumerable:!(s=h(e,l))||s.enumerable});return i};var f=(i,e,d)=>(d=i!=null?u(m(i)):{},a(e||!i||!i.__esModule?t(d,"default",{value:i,enumerable:!0}):d,i)),H=i=>a(t({},"__esModule",{value:!0}),i);var c=g((v,r)=>{r.exports=_jsx_runtime});var j={};x(j,{default:()=>k,frontmatter:()=>V});var n=f(c()),V={id:"visually-hidden",title:"Visually Hidden",category:"disclosure",package:"@chakra-ui/visually-hidden",description:"VisuallyHidden is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers."};function o(i){let e=Object.assign({h2:"h2",p:"p",code:"code",pre:"pre",h3:"h3"},i.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.p,{children:"Chakra UI exports 2 components for the VisuallyHidden."}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"VisuallyHidden"}),`: Visually hidden span component used to hide elements on screen. `,(0,n.jsx)(e.code,{children:"VisuallyHiddenInput"}),`: Visually hidden input component used for designing custom input components using the html `,(0,n.jsx)(e.code,{children:"input"})," as a proxy"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { VisuallyHidden, VisuallyHiddenInput } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:[`It is used to visually hide an element but to make it accessible for screen-readers. It renders html `,(0,n.jsx)(e.code,{children:""})," as a proxy."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function Example() { return ( ) } `})}),` `,(0,n.jsx)(e.p,{children:"Here is another example:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function Example() { return ( Title and description This will be hidden ) } `})}),` `,(0,n.jsx)(e.h3,{id:"visually-hidden-input",children:"Visually hidden input"}),` `,(0,n.jsxs)(e.p,{children:["It renders html ",(0,n.jsx)(e.code,{children:""})," as a proxy."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function Example() { return ( { console.log(event.target.checked) }} /> ) } `})}),` `,(0,n.jsx)(e.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"VisuallyHidden"}),` has all the styles necessary to hide it from visual clients, but keep it for screen readers.`]})]})}function b(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(o,i)})):o(i)}var k=b;return H(j);})(); ;return Component;

Visually Hidden

Props#