输入与选择 / COMPONENT ATLAS

表单标签FormLabel

为输入框提供明确的名称,通过 html_for 关联输入元素。

亲手试一试。

01 / LIVE PREVIEW
● FormLabel

STATES / 示例状态

标签关联
在左侧预览中体验这枚组件。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
let mut title = use_signal(String::new);
rsx! {
    div {
        FormLabel {
            label: "文章标题",
            html_for: Some("post-title".to_string()),
        }
        FormInput {
            id: Some("post-title".to_string()),
            r#type: "text",
            placeholder: "点击标签也能聚焦这里",
            value: title(),
            oninput: move |value| title.set(value),
        }
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
labelString必填标签显示的文本。
html_forOption<String>None关联 input 的 id。

操作方式

04 / INTERACTION
点击标签聚焦关联输入框
YGGDRASIL · 每一个细节,都有回应。src/components/forms.rs
© 2026 Yggdrasil