leptos-forms-rs 1.2.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

//! Main wizard component for the example
//!
//! This module provides the main FormWizardExample component that demonstrates
//! the usage of the FormWizard with step management and validation.

use crate::hooks::use_form;
use leptos::prelude::*;

use super::form_types::WizardForm;
use super::step_components::{ConfirmationStep, PersonalInfoStep, PreferencesStep};

/// Main form wizard example component
#[component]
pub fn FormWizardExample() -> impl IntoView {
    let form_handle = use_form::<WizardForm>(WizardForm::default());

    // Current step state
    let (current_step, set_current_step) = signal(0);

    // Step validation state
    let (step_validation, set_step_validation) = signal::<Vec<bool>>(vec![false, false, false]);

    // Create wizard steps
    let steps = vec![
        "Personal Info".to_string(),
        "Preferences".to_string(),
        "Confirmation".to_string(),
    ];

    view! {
        <div class="form-wizard-example">
            <h1>"Form Wizard Example"</h1>
            <p>"This example demonstrates the enhanced Form Wizard component with validation, navigation, and step management."</p>

            <div class="wizard-container">
                <div class="wizard-steps">
                    <div class="wizard-step active">
                        <div class="step-number">1</div>
                        <div class="step-title">"Personal Info"</div>
                    </div>
                    <div class="wizard-step">
                        <div class="step-number">2</div>
                        <div class="step-title">"Preferences"</div>
                    </div>
                    <div class="wizard-step">
                        <div class="step-number">3</div>
                        <div class="step-title">"Confirmation"</div>
                    </div>
                </div>

                <div class="wizard-content">
                    <PersonalInfoStep />
                </div>

                <div class="wizard-navigation">
                    <button class="btn btn-secondary" disabled=true>
                        "Previous"
                    </button>
                    <button class="btn btn-primary">
                        "Next"
                    </button>
                </div>
            </div>

            <div class="example-info">
                <h3>"Features Demonstrated"</h3>
                <ul>
                    <li>"Step-by-step form navigation"</li>
                    <li>"Progress tracking with visual indicators"</li>
                    <li>"Step validation and error handling"</li>
                    <li>"Responsive design for mobile and desktop"</li>
                    <li>"Accessibility features and keyboard navigation"</li>
                    <li>"Custom step content rendering"</li>
                    <li>"Form completion handling"</li>
                </ul>

                <div class="current-step-info">
                    <h4>"Current Step: {move || current_step.get() + 1}"</h4>
                    <p>"Step validation status: {move || {
                        let validation = step_validation.get();
                        if current_step.get() < validation.len() {
                            if validation[current_step.get()] { "Valid" } else { "Invalid" }
                        } else {
                            "Unknown"
                        }
                    }}"</p>
                </div>
            </div>
        </div>
    }
}