Visually Hidden

Hides content from the screen in an accessible way.

Features

• Visually hides content while preserving it for assistive technology.

Installation

Install the component from your command line.

cargo add radix-leptos-visually-hidden

Anatomy

Import the component.

use leptos::*;
use radix_leptos_visually_hidden::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <VisuallyHidden />
    }
}

API Reference

Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

Example

Use the visually hidden primitive.

use leptos::*;
use radix_leptos_visually_hidden::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <button>
            <GearIcon />
            <VisuallyHidden>Settings</VisuallyHidden>
        </button>
    }
}

Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.

See Also

• Radix documentation