Function Input

pub fn Input(props: InputProps) -> impl IntoView

Available on crate feature lep 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

(IntoView): A Leptos element representation of the input component.

Examples

use leptos::{prelude::*, *};
use regex::Regex;
use serde::{Deserialize, Serialize};
use input_rs::leptos::Input;


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

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

fn validate_password(password: String) -> bool {
    !&password.is_empty()
}

#[component]
fn LoginForm() -> impl IntoView {
    let error_handle = signal(String::default());
    let error = error_handle.0.get();

    let email_valid_handle = signal(true);
    let email_valid = email_valid_handle.0.get();

    let password_valid_handle = signal(true);
    let password_valid = password_valid_handle.0.get();

    let email_handle = signal(String::default());
    let email = email_handle.0.get();

    let password_handle = signal(String::default());
    let password = password_handle.0.get();

    let onsubmit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();

        let email_ref = email.clone();
        let password_ref = password.clone();
        let error_handle = error_handle.clone();

        // Custom logic for your endpoint goes here
    };

    view! {
        <div class="form-one-content" role="main" aria-label="Sign In Form">
            <div class="text">
                <h2>{"Sign In"}</h2>
                { move || if !error.is_empty() {
                        Some(view! {<div class="error">error</div>})
                    }
                        else {None}
                }
            </div>
            <form on:submit={onsubmit}>
                <Input
                    r#type="text"
                    handle={email_handle}
                    name="email"
                    label="Email"
                    placeholder="Email"
                    input_class="form-one-field"
                    field_class="form-one-field"
                    error_class="error-txt"
                    required=true
                    valid_handle={email_valid_handle}
                    validate_function={validate_email}
                    error_message="Enter a valid email address"
                />
                <Input
                    r#type="password"
                    handle={password_handle}
                    name="password"
                    label="Password"
                    placeholder="Password"
                    input_class="form-one-field"
                    field_class="form-one-field"
                    error_class="error-txt"
                    required=true
                    valid_handle={password_valid_handle}
                    validate_function={validate_password}
                    error_message="Password can't be blank!"
                    eye_active="fa fa-eye"
                    eye_disabled="fa fa-eye-slash"
                />
                <div class="form-one-forgot-pass">
                    <a href="#">{"Forgot Password?"}</a>
                </div>
                <button type="submit">{"Sign in"}</button>
                <div class="sign-up">
                    {"Not a member?"}
                    <a href="#">{"Sign up now"}</a>
                </div>
            </form>
        </div>
    }
}

Required Props

• handle: [(ReadSignal<String>, WriteSignal<String>)]
  • The state handle for managing the value of the input.
• valid_handle: [(ReadSignal<bool>, WriteSignal<bool>)]
  • The state handle for managing the validity state of the input.
• validate_function: [fn(String) -> bool]
  • A callback function to validate the input value. It takes a String as input and returns a bool.

Optional Props

• r#type: [&'static str]

  • Props for a custom input component. This struct includes all possible attributes for an HTML <input> element. See MDN docs for more details.

    The type of the input, e.g., “text”, “password”, etc.

• label: [&'static str]
  • The label to be displayed for the input field.
• name: [&'static str]
  • The name of the input field, used for form submission and accessibility.
• required: bool
  • Indicates whether the input is required or not.
• error_message: [&'static str]
  • The error message to display when there is a validation error.
• input_class: [&'static str]
  • The CSS class to be applied to all inner elements.
• field_class: [&'static str]
  • The CSS class to be applied to the inner input element and icon.
• label_class: [&'static str]
  • The CSS class to be applied to the label for the input element.
• class: [&'static str]
  • The CSS class to be applied to the input element.
• error_class: [&'static str]
  • The CSS class to be applied to the error div element.
• icon_class: [&'static str]
  • The CSS class to be applied to the icon element.
• eye_active: [&'static str]
  • The icon when the password is visible. Assuming fontawesome icons are used by default.
• eye_disabled: [&'static str]
  • The icon when the password is not visible. Assuming fontawesome icons are used by default.
• id: [&'static str]
  • The ID attribute of the input element.
• placeholder: [&'static str]
  • The placeholder text to be displayed in the input element.
• aria_label: [&'static str]
  • The aria-label attribute for screen readers, providing a label for accessibility.
• aria_required: [&'static str]
  • The aria-required attribute for screen readers, indicating whether the input is required.
• aria_invalid: [&'static str]
  • The aria-invalid attribute for screen readers, indicating whether the input value is invalid.
• aria_describedby: [&'static str]
  • The aria-describedby attribute for screen readers, describing the input element’s error message.
• accept: [&'static str]
  • Hint for expected file type in file upload controls.
• alt: [&'static str]
  • The alternative text for <input r#type="image">. Required for accessibility.
• autocapitalize: [&'static str]
  • Controls automatic capitalization in inputted text.
• autocomplete: [&'static str]
  • Hint for the browser’s autofill feature.
• capture: [&'static str]
  • Media capture input method in file upload controls.
• checked: bool
  • Whether the control is checked (for checkboxes or radio buttons).
• dirname: [&'static str]
  • Name of the form field to use for sending the element’s directionality in form submission.
• disabled: bool
  • Whether the form control is disabled.
• form: [&'static str]
  • Associates the input with a specific form element.
• formaction: [&'static str]
  • URL to use for form submission (for <input r#type="image" | "submit">).
• formenctype: [&'static str]
  • Form data set encoding type for submission (for <input r#type="image" | "submit">).
• formmethod: [&'static str]
  • HTTP method to use for form submission (for <input r#type="image" | "submit">).
• formnovalidate: bool
  • Bypass form validation for submission (for <input r#type="image" | "submit">).
• formtarget: [&'static str]
  • Browsing context for form submission (for <input r#type="image" | "submit">).
• height: Option<u32>
  • Same as the height attribute for <img> elements.
• list: [&'static str]
  • ID of the <datalist> element to use for autocomplete suggestions.
• max: [&'static str]
  • The maximum value for date, number, range, etc.
• maxlength: Option<usize>
  • Maximum length of the input value (in characters).
• min: [&'static str]
  • The minimum value for date, number, range, etc.
• minlength: Option<usize>
  • Minimum length of the input value (in characters).
• multiple: bool
  • Boolean indicating whether multiple values are allowed (for file inputs, emails, etc.).
• pattern: [&'static str]
  • Regex pattern the value must match to be valid.
• readonly: bool
  • Boolean indicating whether the input is read-only.
• size: Option<u32>
  • Size of the input field (e.g., character width).
• src: [&'static str]
  • Address of the image resource for <input r#type="image">.
• step: [&'static str]
  • Incremental values that are valid for the input.
• value: [&'static str]
  • The value of the control (used for two-way data binding).
• width: Option<u32>
  • Same as the width attribute for <img> elements.