Function Input 

pub fn Input(props: InputProps) -> Element

Available on crate feature dio only.

A custom input component that handles user input and validation.

Arguments

• props - The properties of the component.
  • valid_handle - A state hook to track the validity of the input.
  • aria_invalid - A string representing the ‘aria-invalid’ attribute value for accessibility. Defaults to “true”.
  • aria_required - A string representing the ‘aria-required’ attribute value for accessibility. Defaults to “true”.
  • r#type - The type of the input element. Defaults to “text”.
  • handle - A state hook to set the value of the input.
  • validate_function - A function to validate the input value.

Returns

(Element): A Dioxus element representation of the input component.

Examples

use regex::Regex;
use input_rs::dioxus::Input;
use dioxus::prelude::*;

#[derive(Debug, Default, Clone)]
struct LoginUserSchema {
    email: String,
    password: String,
}

fn LoginFormOne() -> Element {
    let error_handle = use_signal(|| String::new());
    let email_valid_handle = use_signal(|| true);
    let password_valid_handle = use_signal(|| true);

    let email_handle = use_signal(|| String::new());
    let password_handle = use_signal(|| String::new());

    let validate_email = |email: String| {
        let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
        pattern.is_match(&email)
    };
     
    let validate_password = |password: String| {
        !password.is_empty()
    };

    let onsubmit = {
        move |e: FormEvent| {
            e.stop_propagation();
            // Custom logic for your endpoint goes here.
        }
    };

    rsx! {
        div {
            class: "form-one-content",
            role: "main",
            aria_label: "Sign In Form",
            div {
                class: "text",
                h2 { "Sign In" }
                if !error_handle().is_empty() {
                    div { class: "error", "{error_handle}" }
                }
            }
            form {
                onsubmit: onsubmit,
                aria_label: "Sign In Form",
                Input {
                    r#type: "text",
                    handle: email_handle,
                    name: "email",
                    placeholder: "Email",
                    icon_class: "fas fa-user",
                    error_message: "Enter a valid email address",
                    field_class: "form-one-field",
                    error_class: "error-txt",
                    required: true,
                    valid_handle: email_valid_handle,
                    validate_function: validate_email,
                }
                Input {
                    r#type: "password",
                    handle: password_handle,
                    name: "password",
                    placeholder: "Password",
                    icon_class: "fas fa-lock",
                    error_message: "Password can't be blank!",
                    field_class: "form-one-field",
                    error_class: "error-txt",
                    required: true,
                    valid_handle: password_valid_handle,
                    validate_function: validate_password,
                    eye_active: "fa fa-eye",
                    eye_disabled: "fa fa-eye-slash",
                }
                div {
                    class: "form-one-forgot-pass",
                    a {
                        href: "#",
                        aria_label: "Forgot Password?",
                        "Forgot Password?"
                    }
                }
                button {
                    r#type: "submit",
                    "Sign in"
                }
                div {
                    class: "sign-up",
                    "Not a member? ",
                    a {
                        href: "#",
                        aria_label: "Sign up now",
                        "Sign up now"
                    }
                }
            }
        }
    }
}