Visually Hidden

A utility component for hiding content visually while keeping it accessible to screen readers. Essential for providing context to assistive technologies without affecting the visual design.

Anatomy

<script>
  import { VisuallyHidden } from "@saas-ui/svelte/utilities/visually-hidden";
</script>

<!-- Hide text visually but keep accessible -->
<button>
  <Icon />
  <VisuallyHidden>Close menu</VisuallyHidden>
</button>

<!-- Accessible form label -->
<label>
  <VisuallyHidden>Search</VisuallyHidden>
  <input type="search" placeholder="Search..." />
</label>

Examples

Basic Accessibility

Basic usage demonstrating content that is hidden from visual users but accessible to screen readers.

<Button>
	<Icon as={Bell} size="sm" />
	3
	<VisuallyHidden>Notifications</VisuallyHidden>
</Button>

Props

Prop	Type	Default	Description
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.