maud_ui/primitives/
label.rs

1//! Label component — standalone form label element.
2
3use maud::{html, Markup};
4
5/// Label rendering properties
6#[derive(Debug, Clone)]
7pub struct Props {
8    /// Label text
9    pub text: String,
10    /// ID of associated form control
11    pub html_for: Option<String>,
12    /// Whether the field is required
13    pub required: bool,
14    /// Whether the label should appear disabled
15    pub disabled: bool,
16}
17
18impl Default for Props {
19    fn default() -> Self {
20        Self {
21            text: String::new(),
22            html_for: None,
23            required: false,
24            disabled: false,
25        }
26    }
27}
28
29/// Render a label element
30pub fn render(props: Props) -> Markup {
31    let mut class = "mui-label".to_string();
32    if props.disabled {
33        class.push_str(" mui-label--disabled");
34    }
35
36    if let Some(html_for) = props.html_for {
37        html! {
38            label class=(class) for=(html_for) {
39                (props.text)
40                @if props.required {
41                    span.mui-label__required aria-hidden="true" { " *" }
42                }
43            }
44        }
45    } else {
46        html! {
47            label class=(class) {
48                (props.text)
49                @if props.required {
50                    span.mui-label__required aria-hidden="true" { " *" }
51                }
52            }
53        }
54    }
55}
56
57/// Showcase label variants
58pub fn showcase() -> Markup {
59    html! {
60        div.mui-showcase__grid {
61            section {
62                h2 { "Variants" }
63                div.mui-showcase__column {
64                    div {
65                        p.mui-showcase__caption { "Default" }
66                        (render(Props {
67                            text: "Email address".into(),
68                            html_for: Some("email-input".into()),
69                            ..Props::default()
70                        }))
71                    }
72                    div {
73                        p.mui-showcase__caption { "Required" }
74                        (render(Props {
75                            text: "Password".into(),
76                            html_for: Some("password-input".into()),
77                            required: true,
78                            ..Props::default()
79                        }))
80                    }
81                    div {
82                        p.mui-showcase__caption { "Disabled" }
83                        (render(Props {
84                            text: "Username".into(),
85                            html_for: Some("username-input".into()),
86                            disabled: true,
87                            ..Props::default()
88                        }))
89                    }
90                }
91            }
92            section {
93                h2 { "With input" }
94                div.mui-showcase__column {
95                    div class="mui-field" {
96                        (render(Props {
97                            text: "Email".into(),
98                            html_for: Some("demo-email".into()),
99                            required: true,
100                            ..Props::default()
101                        }))
102                        input class="mui-input" id="demo-email" type="email" placeholder="you@example.com" {}
103                    }
104                }
105            }
106        }
107    }
108}
maud_ui/primitives/label.rs

maud_ui/primitives/
label.rs
