VisuallyHidden

A utility component that hides content visually while keeping it accessible to screen readers.

Build accessible interfaces by providing screen reader text for icon-only actions and decorative elements.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use VisuallyHidden with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Hides content from visual display using WAI-ARIA recommended CSS techniques
focusable prop enables the element to receive keyboard focus for focus trap boundaries
Used internally by Drawer, Dialog, and FocusTrap for focus management

Usage#

import { VisuallyHidden } from 'primereact/visuallyhidden';

<button>
    <i className="pi pi-trash" />
    <VisuallyHidden></VisuallyHidden>
</button>

Behavior#

Polymorphic Rendering#

Use as to change the rendered HTML element. Defaults to span.

<VisuallyHidden as="label" htmlFor="search-input">
    Search
</VisuallyHidden>

Render Function Children#

<VisuallyHidden>{(instance) => <span>Hidden text</span>}</VisuallyHidden>

API#

VisuallyHidden#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: VisuallyHiddenInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: VisuallyHiddenInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`VisuallyHiddenInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<VisuallyHiddenPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: VisuallyHiddenInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`focusable`	`boolean`	`false`
When enabled, the element can receive focus via keyboard navigation.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Accessibility#

VisuallyHidden content is announced by screen readers as regular text within the document flow. The component applies CSS styles that remove the element from visual rendering while preserving its presence in the accessibility tree.

Keyboard Support#

When focusable is true, the element receives a tabIndex of 0 and can be reached via tab navigation. This is used internally by focus trap implementations to create invisible tab-stop boundaries.