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
Open
import { VisuallyHidden } from "@peakon/bedrock/react/visually-hidden";
import { BodyText } from "@peakon/bedrock/react/typography";
function Snippet() {
return (
<>
<BodyText>This text is visible..</BodyText>
<VisuallyHidden>
This text is hidden but still available to people who use assistive
technologies.
</VisuallyHidden>
<BodyText>
..and so is this, but there is some hidden text between these two
lines.
</BodyText>
</>
);
}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";
function Snippet() {
return (
<fieldset>
<VisuallyHidden as="legend">Personal info</VisuallyHidden>
<div>
<label htmlFor="example-fname" style={{ display: "block" }}>
First name
</label>
<input
type="text"
id="example-fname"
style={{ width: "80%", fontSize: "1rem" }}
/>
</div>
<div style={{ marginBlockStart: "1rem" }}>
<label htmlFor="example-lname" style={{ display: "block" }}>
Last name
</label>
<input
type="text"
id="example-lname"
style={{ width: "80%", fontSize: "1rem" }}
/>
</div>
</fieldset>
);
}Props TablePermalink to: Props Table
Props extend from HTML Span Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
as | HTML element | Defines the rendered element. If another element is passed, the props will extend from that element. | span | No |