A utility that hides content from the screen while retaining readability by screen readers for accessibility.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/visually-hidden`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/visually-hidden, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`children`
Required
Description	The element or elements that should be hidden.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Description	An id may be appropriate for this component if used in conjunction with `aria-describedby` on a paired element.
Type	`string`

`role`
Description	An ARIA role attribute to aid screen readers.
Type	`string`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.