VisuallyHidden is a utility component that is used for accessibility purposes. It is used to hide elements visually, while still making them available to assistive technology like screen readers, so that people with disabilities can still access the content.
UsagePermalink to: Usage
Use VisuallyHidden sparingly — if something is important, it should not be hidden, and never use it for critical content.
ExamplesPermalink to: Examples
This text is visible..
This text is hidden but still available to people who use assistive technologies...and so is this, but there is some hidden text between these two lines.
Open
import { VisuallyHidden } from "@peakon/bedrock/react/visually-hidden";
<p>This text is visible..</p>
<VisuallyHidden>This text is hidden but still available to people who use assistive technologies.</VisuallyHidden>
<p>..and so is this, but there is some hidden text between these two lines.</p>Using the as propPermalink to: Using the
Passing an element type to as will render the root element as the type provided. For example, in the following example we pass as="legend" which renders a visually hidden legend.
Open
import { VisuallyHidden } from "@peakon/bedrock/react/visually-hidden";
<!-- CSS left out for brevity -->
<fieldset>
<VisuallyHidden as="legend">Personal info</VisuallyHidden>
<div>
<label htmlFor="example-fname">
First name
</label>
<input
type="text"
id="example-fname"
/>
</div>
<div>
<label htmlFor="example-lname">
Last name
</label>
<input
type="text"
id="example-lname"
/>
</div>
</fieldset>Props TablePermalink to: Props Table
Props extend from the HTML span element(external link) by default, with the omission of className and style. If another element is passed using the as prop, the props will extend from that element.
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
| as | HTML element | Defines the rendered element. | span | No |