Renders an accessible label associated with controls.
Leptos
Yew
label.rs
use leptos::*;
use radix_leptos_label::*;
#[component]
pub fn LabelDemo() -> impl IntoView {
view! {
<div class="flex flex-wrap items-center gap-[15px] px-5">
<Label attr:class="text-[15px] font-medium leading-[35px] text-white" attr:for="firstName">
First name
</Label>
<input
class="bg-blackA2 shadow-blackA6 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="text"
id="firstName"
value="Pedro Duarte"
/>
</div>
}
}
label.rs
use radix_yew_label::*;
use yew::prelude::*;
#[function_component]
pub fn LabelDemo() -> Html {
html! {
<div class="flex flex-wrap items-center gap-[15px] px-5">
<Label class="text-[15px] font-medium leading-[35px] text-white" r#for="firstName">
{"First name"}
</Label>
<input
class="bg-blackA2 shadow-blackA6 inline-flex h-[35px] w-[200px] appearance-none items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-white shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px_black] selection:color-white selection:bg-blackA6"
type="text"
id="firstName"
value="Pedro Duarte"
/>
</div>
}
}
Text selection is prevented when double clicking label.
Supports nested controls.
Install the component from your command line.
Leptos
Yew
cargo add radix-leptos-label
cargo add radix-yew-label
Import the component.
Leptos
Yew
use leptos::*;
use radix_leptos_label::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<Label />
}
}
use radix_yew_label::*;
use yew::prelude::*;
#[component]
fn Anatomy() -> impl IntoView {
view! {
<Label />
}
}
Contains the content for the label.
Leptos
Yew
Prop Type Default
as_child
MaybeProp<bool>
false
on_mouse_down
Option<Callback<MouseEvent>>
-
Prop Type Default
as_child
Option<Callback<LabelChildProps, Html>>
-
on_mouse_down
Option<Callback<MouseEvent>>
-
This component is based on the native label
element, it will automatically apply the correct labelling when wrapping controls or using the for
attribute. For your own custom controls to work correctly, ensure they use native elements such as button
or input
as a base.