Visually Hidden
Hide content visually while keeping it available to assistive technologies such as screen readers.
Import
import { VisuallyHidden } from "@shivms/ui";The examples below demonstrate how VisuallyHidden behaves in different states and when rendered as different HTML elements.
Basic
Default
Visible text
Screen reader only textStates
Default
Visible text
Screen reader only textVisible
Visible text
Screen reader only textHidden
Visible text
Screen reader only textDisabled
Visible text
Screen reader only textElements
span
Visible text
Screen reader only textdiv
Visible text
Screen reader only text
label
Visible text