VisuallyHidden

What is this?

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

Search

A good usage example is the Search component, which we implement something similar like that internally.

Usage

import { VisuallyHidden } from '@vtex/admin-ui'

export function Example() {
  return (
    <div>
      <VisuallyHidden>
        <label htmlFor="search">Hidden Label</label>
      </VisuallyHidden>
      <input id="search" type="search" placeholder="A11y Search Input" />
    </div>
  )
}

Props

Extends all the props of span JSX element.

Name	Type	Description	Required	Default
csx	StyleProp	Defines component styles	🚫	{}

• What is this?
• Search