VisuallyHidden

Component to hide its children.

<VisuallyHidden> is a utility component that can be used to hide its children visually, while keeping them visible to screen readers and other assistive technology.

This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.

Import

import { VisuallyHidden } from '@marigold/components';

Props

PropertyTypeDefaultDescription
isFocusablebooleanfalseWhether the element should become visible on focus.

Examples

The Text below is visually hidden

I am invisible