dioxus_element_plug/components/
form_item.rs

1use dioxus::prelude::*;
2
3/// FormItem props
4#[derive(Props, Clone, PartialEq)]
5pub struct FormItemProps {
6    #[props(default)]
7    pub children: Element,
8
9    /// Field label
10    #[props(default)]
11    pub label: Option<String>,
12
13    /// Field prop name
14    #[props(default)]
15    pub prop: Option<String>,
16
17    /// Field width
18    #[props(default)]
19    pub label_width: Option<String>,
20
21    /// Whether the field is required
22    #[props(default = false)]
23    pub required: bool,
24
25    /// Error message
26    #[props(default)]
27    pub error: Option<String>,
28
29    /// Whether to show error
30    #[props(default = false)]
31    pub show_error: bool,
32
33    /// Inline message
34    #[props(default = false)]
35    pub inline_message: bool,
36
37    /// Validation status
38    #[props(default)]
39    pub status: Option<String>,
40
41    #[props(default)]
42    pub class: Option<String>,
43
44    #[props(default)]
45    pub style: Option<String>,
46}
47
48/// FormItem component for form field wrappers
49#[component]
50pub fn FormItem(props: FormItemProps) -> Element {
51    let mut class_names = vec!["el-form-item".to_string()];
52    if props.required { class_names.push("is-required".to_string()); }
53    if props.error.is_some() { class_names.push("is-error".to_string()); }
54    if let Some(ref c) = props.class { class_names.push(c.clone()); }
55
56    let label_style = props.label_width.clone().map(|w| format!("width: {};", w)).unwrap_or_default();
57
58    rsx! {
59        div {
60            class: "{class_names.join(\" \")}",
61            style: props.style.clone().unwrap_or_default(),
62            if let Some(ref label) = props.label {
63                label {
64                    class: "el-form-item__label",
65                    style: "{label_style}",
66                    "{label}"
67                }
68            }
69            div {
70                class: "el-form-item__content",
71                {props.children}
72                if let Some(ref error) = props.error {
73                    div {
74                        class: "el-form-item__error",
75                        "{error}"
76                    }
77                }
78            }
79        }
80    }
81}
dioxus_element_plug/components/form_item.rs

dioxus_element_plug/components/
form_item.rs
