leptos_forms_rs/components/examples/wizard/
step_components.rs

1//! Step components for the wizard example
2//!
3//! This module provides individual step components for the form wizard.
4
5use leptos::prelude::*;
6
7/// Personal information step component
8#[component]
9pub fn PersonalInfoStep() -> impl IntoView {
10    view! {
11        <div class="step-personal-info">
12            <h3>"Personal Information"</h3>
13            <p>"Please provide your basic contact information."</p>
14
15            <div class="form-group">
16                <label for="first-name">"First Name"</label>
17                <input
18                    type="text"
19                    id="first-name"
20                    value="John"
21                    placeholder="Enter your first name"
22                    class="form-input"
23                />
24            </div>
25
26            <div class="form-group">
27                <label for="last-name">"Last Name"</label>
28                <input
29                    type="text"
30                    id="last-name"
31                    value="Doe"
32                    placeholder="Enter your last name"
33                    class="form-input"
34                />
35            </div>
36
37            <div class="form-group">
38                <label for="email">"Email Address"</label>
39                <input
40                    type="email"
41                    id="email"
42                    value="john.doe@example.com"
43                    placeholder="Enter your email"
44                    class="form-input"
45                />
46            </div>
47        </div>
48    }
49}
50
51/// Preferences step component
52#[component]
53pub fn PreferencesStep() -> impl IntoView {
54    view! {
55        <div class="step-preferences">
56            <h3>"Preferences"</h3>
57            <p>"Customize your experience with these settings."</p>
58
59            <div class="form-group">
60                <label for="theme">"Theme"</label>
61                <select id="theme" class="form-select">
62                    <option value="light">"Light"</option>
63                    <option value="dark" selected="true">"Dark"</option>
64                    <option value="auto">"Auto"</option>
65                </select>
66            </div>
67
68            <div class="form-group">
69                <label class="checkbox-label">
70                    <input type="checkbox" checked="true" />
71                    <span>"Enable notifications"</span>
72                </label>
73            </div>
74
75            <div class="form-group">
76                <label class="checkbox-label">
77                    <input type="checkbox" />
78                    <span>"Subscribe to newsletter"</span>
79                </label>
80            </div>
81        </div>
82    }
83}
84
85/// Confirmation step component
86#[component]
87pub fn ConfirmationStep() -> impl IntoView {
88    view! {
89        <div class="step-confirmation">
90            <h3>"Confirmation"</h3>
91            <p>"Please review your information and accept the terms."</p>
92
93            <div class="summary">
94                <h4>"Summary"</h4>
95                <div class="summary-item">
96                    <strong>"Name:"</strong>
97                    <span>"John Doe"</span>
98                </div>
99                <div class="summary-item">
100                    <strong>"Email:"</strong>
101                    <span>"john.doe@example.com"</span>
102                </div>
103                <div class="summary-item">
104                    <strong>"Theme:"</strong>
105                    <span>"Dark"</span>
106                </div>
107                <div class="summary-item">
108                    <strong>"Notifications:"</strong>
109                    <span>"Enabled"</span>
110                </div>
111            </div>
112
113            <div class="form-group">
114                <label class="checkbox-label">
115                    <input type="checkbox" />
116                    <span>"I accept the terms and conditions"</span>
117                </label>
118            </div>
119
120            <div class="form-group">
121                <label class="checkbox-label">
122                    <input type="checkbox" />
123                    <span>"I agree to the privacy policy"</span>
124                </label>
125            </div>
126        </div>
127    }
128}
leptos_forms_rs/components/examples/wizard/step_components.rs

leptos_forms_rs/components/examples/wizard/
step_components.rs
