Label

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a label for an input field.

  • Rust UI Icons - CopyCopy Demo

Label Demo

use leptos::prelude::*;

use crate::components::ui::label::Label;

#[component]
pub fn DemoLabel() -> impl IntoView {
    view! {
        <div class="space-y-4">
            <h2 class="text-2xl font-bold">Label Demo</h2>
            <div class="flex items-center space-x-2">
                // <Checkbox id="terms" checked=false />
                <Label html_for="terms">Accept terms and conditions</Label>
            </div>
        </div>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_label
ui add label

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/label.rs

use leptos::prelude::*;
use tw_merge::*;

#[component]
pub fn Label(
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] html_for: String,
    children: Children,
) -> impl IntoView {
    let class = tw_merge!(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        class
    );

    view! {
        <label class=class r#for=html_for>
            {children()}
        </label>
    }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::label::Label;

<Label r#for="input-id">"Label text"</Label>
Rust UI Icons - ChevronLeftInputMarqueeRust UI Icons - ChevronRight