VisuallyHidden

ContainersPrimitiveBuilt

Renders children invisibly for sighted users but accessible to screen readers. Equivalent to .sr-only.

Overview

Purpose

The VisuallyHidden component renders children invisibly for sighted users but accessible to screen readers. equivalent to .sr-only.within our design system. It follows our primitive layer principles, ensuring consistency and reusability across applications.

When to Use

  • Use when you need organizing content
  • Appropriate for containers contexts
  • Follows primitive component patterns

When Not to Use

  • Avoid when simpler alternatives exist
  • Don't use for interactive elements
  • Consider alternatives for edge cases

Live Example

import React from 'react';
import VisuallyHidden from './components/VisuallyHidden';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <VisuallyHidden {...props}>
        {props.children || 'Example visuallyhidden content'}
      </VisuallyHidden>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Anatomy

Understanding the structure of the VisuallyHidden component helps ensure proper implementation and customization.

Property Description Type
rootSlot rendered into [data-slot="visually-hidden"].Root
visuallyHiddenVisually hidden region of the component.Part
focusableWhether to show content when focused (for skip links)boolean | undefined

Variants & States

import React from 'react';
import VisuallyHidden from './components/VisuallyHidden';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <VisuallyHidden {...props}>
        {props.children || 'Example visuallyhidden content'}
      </VisuallyHidden>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

API Reference

Props

NameTypeRequiredDefaultDescription
askeyof React.JSX.IntrinsicElementsNo——
focusablebooleanNofalse—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Accessibility Checklist

  • ○ Keyboard navigation support
  • ○ Screen reader compatibility
  • ○ Color contrast compliance
  • ○ Focus management
  • ○ ARIA attributes
  • ○ Reduced motion support

Usage Guidelines

Do

  • Use consistent spacing and sizing
  • Follow established patterns
  • Provide clear labels and descriptions
  • Test with assistive technologies

Don't

  • Override core functionality
  • Use without proper context
  • Ignore accessibility requirements
  • Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import VisuallyHidden from './components/VisuallyHidden';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <VisuallyHidden {...props}>
        {props.children || 'Example visuallyhidden content'}
      </VisuallyHidden>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>VisuallyHidden - Advanced Patterns</h3>
      <p>Advanced usage patterns for VisuallyHidden include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the VisuallyHidden component documentation. Found an issue or have suggestions?

Edit this pageReport an issueContribution guidelines

Related Components

Accordion

Vertically stacked sections that expand/collapse to reveal content. Supports single or multi-panel open modes.

Containers • composers

AspectRatio

Constrains its child to a fixed aspect ratio (e.g. 16:9) regardless of container width.

Containers • primitives

Dialog

Modal overlay requiring user attention before returning to the page. Traps focus until dismissed.

Containers • composers

Drawer

Sliding overlay.

Containers • composers

List

Semantic list element (ul, ol, or dl) with consistent spacing and marker styles.

Containers • primitives

Modal

Blocking and non-blocking overlay container.

Containers • composers