Skip to content

VisuallyHidden

<ts-visually-hidden> vv0.6.3

A utility component that visually hides content while keeping it accessible to screen readers. Useful for providing additional context to assistive technologies without cluttering the visual interface.

Open in Storybook for interactive demos.

<ts-visually-hidden>Content</ts-visually-hidden>
PropertyAttributeTypeDefaultDescription
focusablefocusablebooleanfalseWhen true, the content becomes visible when focused (useful for skip links).
NameDescription
*(default)*Default slot for content to be visually hidden.
<ts-visually-hidden>Content</ts-visually-hidden>
import { TsVisuallyHidden } from '@tessera-ui/react';
<TsVisuallyHidden>Content</TsVisuallyHidden>