Struct InputProps

pub struct InputProps {

    pub type: &'static str,
    pub label: &'static str,
    pub name: &'static str,
    pub required: bool,
    pub error_message: &'static str,
    pub input_class: &'static str,
    pub field_class: &'static str,
    pub label_class: &'static str,
    pub class: &'static str,
    pub error_class: &'static str,
    pub icon_class: &'static str,
    pub handle: (ReadSignal<String>, WriteSignal<String>),
    pub valid_handle: (ReadSignal<bool>, WriteSignal<bool>),
    pub validate_function: fn(String) -> bool,
    pub eye_active: &'static str,
    pub eye_disabled: &'static str,
    pub id: &'static str,
    pub placeholder: &'static str,
    pub aria_label: &'static str,
    pub aria_required: &'static str,
    pub aria_invalid: &'static str,
    pub aria_describedby: &'static str,
    pub accept: &'static str,
    pub alt: &'static str,
    pub autocapitalize: &'static str,
    pub autocomplete: &'static str,
    pub capture: &'static str,
    pub checked: bool,
    pub dirname: &'static str,
    pub disabled: bool,
    pub form: &'static str,
    pub formaction: &'static str,
    pub formenctype: &'static str,
    pub formmethod: &'static str,
    pub formnovalidate: bool,
    pub formtarget: &'static str,
    pub height: Option<u32>,
    pub list: &'static str,
    pub max: &'static str,
    pub maxlength: Option<usize>,
    pub min: &'static str,
    pub minlength: Option<usize>,
    pub multiple: bool,
    pub pattern: &'static str,
    pub readonly: bool,
    pub size: Option<u32>,
    pub src: &'static str,
    pub step: &'static str,
    pub value: &'static str,
    pub width: Option<u32>,
}

Available on crate feature lep only.

Props for the Input component.

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.

Fields

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.

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.

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.

Implementations

impl InputProps

pub fn builder() -> InputPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building InputProps. On the builder, call .r#type(...)(optional), .label(...)(optional), .name(...)(optional), .required(...)(optional), .error_message(...)(optional), .input_class(...)(optional), .field_class(...)(optional), .label_class(...)(optional), .class(...)(optional), .error_class(...)(optional), .icon_class(...)(optional), .handle(...), .valid_handle(...), .validate_function(...), .eye_active(...)(optional), .eye_disabled(...)(optional), .id(...)(optional), .placeholder(...)(optional), .aria_label(...)(optional), .aria_required(...)(optional), .aria_invalid(...)(optional), .aria_describedby(...)(optional), .accept(...)(optional), .alt(...)(optional), .autocapitalize(...)(optional), .autocomplete(...)(optional), .capture(...)(optional), .checked(...)(optional), .dirname(...)(optional), .disabled(...)(optional), .form(...)(optional), .formaction(...)(optional), .formenctype(...)(optional), .formmethod(...)(optional), .formnovalidate(...)(optional), .formtarget(...)(optional), .height(...)(optional), .list(...)(optional), .max(...)(optional), .maxlength(...)(optional), .min(...)(optional), .minlength(...)(optional), .multiple(...)(optional), .pattern(...)(optional), .readonly(...)(optional), .size(...)(optional), .src(...)(optional), .step(...)(optional), .value(...)(optional), .width(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of InputProps.

Trait Implementations

impl Props for InputProps

type Builder = InputPropsBuilder

fn builder() -> Self::Builder