Skip to main content

maud_ui/primitives/
fieldset.rs

1//! Fieldset component — groups related form controls with a legend
2use crate::primitives::field;
3use maud::{html, Markup};
4
5#[derive(Clone, Debug)]
6pub struct Props {
7    pub legend: String,
8    pub disabled: bool,
9    pub children: Markup,
10}
11
12impl Default for Props {
13    fn default() -> Self {
14        Self {
15            legend: "Fieldset".to_string(),
16            disabled: false,
17            children: html! {},
18        }
19    }
20}
21
22pub fn render(props: Props) -> Markup {
23    html! {
24        fieldset.mui-fieldset disabled[props.disabled] {
25            legend.mui-fieldset__legend { (props.legend) }
26            (props.children)
27        }
28    }
29}
30
31pub fn showcase() -> Markup {
32    html! {
33        div.mui-showcase__grid {
34            section {
35                h2 { "Profile Fieldset" }
36                (render(Props {
37                    legend: "Profile".to_string(),
38                    disabled: false,
39                    children: html! {
40                        (field::render(field::Props {
41                            label: "First Name".to_string(),
42                            id: "fs-fname".to_string(),
43                            description: None,
44                            error: None,
45                            required: true,
46                            children: html! {
47                                input.mui-input type="text" id="fs-fname" placeholder="John";
48                            },
49                        }))
50                        (field::render(field::Props {
51                            label: "Last Name".to_string(),
52                            id: "fs-lname".to_string(),
53                            description: None,
54                            error: None,
55                            required: true,
56                            children: html! {
57                                input.mui-input type="text" id="fs-lname" placeholder="Doe";
58                            },
59                        }))
60                    },
61                }))
62            }
63
64            section {
65                h2 { "Disabled Fieldset" }
66                (render(Props {
67                    legend: "Disabled Group".to_string(),
68                    disabled: true,
69                    children: html! {
70                        (field::render(field::Props {
71                            label: "Email".to_string(),
72                            id: "fs-email".to_string(),
73                            description: None,
74                            error: None,
75                            required: false,
76                            children: html! {
77                                input.mui-input type="email" id="fs-email" placeholder="you@example.com" disabled;
78                            },
79                        }))
80                        (field::render(field::Props {
81                            label: "Phone".to_string(),
82                            id: "fs-phone".to_string(),
83                            description: None,
84                            error: None,
85                            required: false,
86                            children: html! {
87                                input.mui-input type="tel" id="fs-phone" placeholder="+1 (555) 000-0000" disabled;
88                            },
89                        }))
90                    },
91                }))
92            }
93        }
94    }
95}