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 r#for="terms">Accept terms and conditions</Label>
</div>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_labelui add labelUpdate 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::*;
use crate::components::ui::_styles::STYLES;
#[component]
pub fn Label(
#[prop(optional, into)] class: String,
#[prop(optional, into)] r#for: String,
children: Children,
) -> impl IntoView {
let class = tw_merge!(
STYLES::DISABLED_NOT_ALLOWED_PEER,
"text-sm font-medium leading-none",
class
);
view! {
<label class=class r#for=r#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>