Visually Hidden

Visually Hidden is a component that hides content from the screen while keeping it accessible to screen readers.

Source
Theme Source
  • VisuallyHidden - The Visually Hidden component that hides content from the screen while keeping it accessible to screen readers.
  • VisuallyHiddenInput - The VisuallyHidden, but an input element. Useful for hidden form data.
import { VisuallyHidden, VisuallyHiddenInput } from "@dreamy-ui/react/rsc";

Base usage of a Visually Hidden component and a Visually Hidden Input component.

<VisuallyHiddenInput name="intent" value="update" />
<Button color="error">
    Destroy
    <VisuallyHidden>
        Content accessible only to screen readers
    </VisuallyHidden>
</Button>