leptos-forms-rs 1.3.0

🚀 Type-safe, reactive form handling library for Leptos applications. Production-ready with 100% test success rate, cross-browser compatibility, and comprehensive validation. Built with Rust/WASM for high performance.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

use crate::core::FieldType;
use leptos::prelude::*;
use leptos::wasm_bindgen::JsCast;

/// Unified Input component that handles different field types
#[component]
pub fn Input(
    name: String,
    #[prop(optional)] value: Option<String>,
    #[prop(optional)] field_type: Option<FieldType>,
    #[prop(optional)] placeholder: Option<String>,
    #[prop(optional)] required: Option<bool>,
    #[prop(optional)] disabled: Option<bool>,
    #[prop(optional)] _error: Option<String>,
    #[prop(optional)] _has_error: Option<bool>,
    #[prop(optional)] on_change: Option<Callback<String>>,
    #[prop(optional)] class: Option<String>,
) -> impl IntoView {
    let input_type = field_type
        .map(|ft| match ft {
            FieldType::Text => "text",
            FieldType::Email => "email",
            FieldType::Password => "password",
            FieldType::Number(_) => "number",
            FieldType::Boolean => "checkbox",
            FieldType::Select(_) => "select",
            FieldType::MultiSelect(_) => "select",
            FieldType::Date => "date",
            FieldType::DateTime => "datetime-local",
            FieldType::File(_) => "file",
            FieldType::Array(_) => "text", // Default to text for arrays
            FieldType::Nested(_) => "text",
            FieldType::RichText | FieldType::Markdown | FieldType::Code => "text", // Default to text for nested forms
        })
        .unwrap_or("text");

    let is_required = required.unwrap_or(false);
    let is_disabled = disabled.unwrap_or(false);
    let input_class = class.unwrap_or_else(|| "form-input".to_string());

    view! {
        <div class="input-wrapper">
            <input
                type=input_type
                name=name.clone()
                value=value
                placeholder=placeholder
                required=is_required
                disabled=is_disabled
                class=input_class
                on:input=move |ev| {
                    if let Some(on_change_callback) = on_change {
                        if let Some(target) = ev.target() {
                            if let Some(input) = target.dyn_ref::<web_sys::HtmlInputElement>() {
                                let value = input.value();
                                on_change_callback.run(value);
                            }
                        }
                    }
                }
            />
            // Error display will be added later when we fix the view macro issue
        </div>
    }
}