Input RS

Y Input RS Yew Usage

Adding Input RS to your project is simple:

Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.
Add the Input RS component to your dependencies by including it in your Cargo.toml file:
```
cargo add input-rs --features=yew
```
Import the Input component into your Yew component and start using it in your app.

🛠️ Usage

Incorporating Yew Input RS into your application is easy. Follow these steps:

Import the Input component into your Yew project:

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

Use the Input component within your Yew application:

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

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

#[function_component(App)]
pub fn app() -> Html {
    let input_email_ref = use_node_ref();
    let input_email_handle = use_state(String::default);
    let email_valid_handle = use_state(|| true);

    html! {
        <form>
            <Input
                r#type="email"
                name="email"
                r#ref={input_email_ref}
                handle={input_email_handle}
                valid_handle={email_valid_handle}
                validate_function={validate_email}
                placeholder="Enter your email"
                label="Email Address"
                required={true}
                error_message="Please provide a valid email address"
                class="form-field"
                label_class="form-label"
                input_class="form-input"
                error_class="error-text"
            />
        </form>
    }
}

🔧 Props

Main Props

Property	Type	Description	Default
`type`	`&'static str`	Input type, e.g., `"text"`, `"email"`, `"password"`, `"textarea"`.	`"text"`
`name`	`&'static str`	Name attribute for the input element.	`""`
`label`	`&'static str`	Text label displayed above the input.	`""`
`placeholder`	`&'static str`	Placeholder text inside the input field.	`""`
`id`	`&'static str`	ID attribute for the input element.	`""`
`required`	`bool`	Indicates whether the field is required.	`false`
`handle`	`UseStateHandle<String>`	State handle for managing the value of the input.	None
`valid_handle`	`UseStateHandle<bool>`	State handle for managing the validity of the input value.	None
`validate_function`	`Callback<String, bool>`	Validation function that checks the input value and returns a boolean.	None
`error_message`	`&'static str`	Message displayed when the input value is invalid.	`""`

Styling Props

+-----------------------------+  <-- `class`
|                             |
|  +-----------------------+  |  <-- `label_class`
|  |       Label           |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `field_class`
|  | +-------+  +--------+ |  |
|  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
|  | +-------+  +--------+ |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `error_class` (if invalid)
|  |       Error Message   |  |
|  +-----------------------+  |
+-----------------------------+

Property	Type	Description	Default
`class`	`&'static str`	CSS class applied to the wrapper container.	`""`
`label_class`	`&'static str`	CSS class applied to the label element.	`""`
`input_class`	`&'static str`	CSS class applied to the input element.	`""`
`field_class`	`&'static str`	CSS class applied to the input wrapper element (includes icons, etc.).	`""`
`error_class`	`&'static str`	CSS class applied to the error message container when validation fails.	`""`
`icon_class`	`&'static str`	CSS class applied to the optional icon (if specified).	`""`

Password Icon Props

Property	Type	Description	Default
`eye_active`	`&'static str`	Icon CSS class for showing the "visible" state in password fields.	`"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye"`
`eye_disabled`	`&'static str`	Icon CSS class for showing the "hidden" state in password fields.	`"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye-slash"`

Accessibility Props

Property	Type	Description	Default
`aria_label`	`&'static str`	Aria-label for the input element for screen reader users.	`""`
`aria_required`	`&'static str`	Specifies whether the input is required for screen readers.	`"true"`
`aria_invalid`	`&'static str`	Indicates whether the input value is invalid for screen readers.	`"false"`
`aria_describedby`	`&'static str`	ID of the element that describes the input (e.g., error message container).	`""`

💡 Notes

The Input component can be used for various input types like text, password, etc.
You can bind the component to state hooks for two-way data binding.
Utilize validate_function to validate user input and display error messages.
The eye_active and eye_disabled props allow for password visibility toggling with FontAwesome icons.
Customize the appearance with CSS classes for better integration into your app's design.

Usage

CLI Usage

You can import Input RS directly into your project to customize and modify it using the opensass cli:

os add input-rs yew

Edit Component

🧬 Input RS Dioxus Usage

Adding Input RS to your project is simple:

Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.
Add the Input component to your dependencies by including it in your Cargo.toml file.
```
cargo add input-rs --features=dio
```
Import the Input components into your Dioxus component and start using it in your app.

🛠️ Usage

Incorporating the Input component into your application is easy. Follow these steps:

Import Input into your component:

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

Use the Input component in your application:

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

#[component]
pub fn App() -> Element {
    let input_value = use_signal(|| String::new());
    let is_valid = use_signal(|| true);

    fn validate_input(value: String) -> bool {
        !value.trim().is_empty()
    }

    rsx! {
        div {
            class: "app-container",
            h1 { "Custom Input Example" }
            Input {
                r#type: "text",
                label: "Enter your name:",
                id: "name-input",
                handle: input_value.clone(),
                valid_handle: is_valid.clone(),
                validate_function: validate_input,
                placeholder: "Type here...",
                class: "custom-input",
                label_class: "input-label",
                field_class: "input-field",
                error_message: "This field cannot be empty",
                error_class: "input-error",
            }
            if !is_valid() {
                p { class: "error-message", "Please correct the input." }
            }
        }
    }
}

🔧 Props

Main Props

Property	Type	Description	Default
`r#type`	`&'static str`	Type of the input (e.g., `text`, `password`, `email`, etc.).	`"text"`
`label`	`&'static str`	Label text for the input field.	`""`
`id`	`&'static str`	Unique ID for the input element.	`""`
`placeholder`	`&'static str`	Placeholder text for the input.	`""`
`handle`	`Signal<String>`	Signal handle for the input value.	None
`valid_handle`	`Signal<bool>`	Signal handle for the validity of the input value.	None
`validate_function`	`fn(String) -> bool`	Validation function for the input value. Returns `true` if valid, `false` otherwise.	None
`required`	`bool`	Indicates whether the input is required.	`false`
`error_message`	`&'static str`	Error message to display if the input is invalid.	`""`

Styling Props

+-----------------------------+  <-- `class`
|                             |
|  +-----------------------+  |  <-- `label_class`
|  |       Label           |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `field_class`
|  | +-------+  +--------+ |  |
|  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
|  | +-------+  +--------+ |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `error_class` (if invalid)
|  |       Error Message   |  |
|  +-----------------------+  |
+-----------------------------+

Property	Type	Description	Default
`class`	`&'static str`	CSS class for the input container.	`""`
`label_class`	`&'static str`	CSS class for the label element.	`""`
`input_class`	`&'static str`	CSS class applied to the input element.	`""`
`field_class`	`&'static str`	CSS class for the input field container.	`""`
`error_class`	`&'static str`	CSS class for the error message container.	`""`

Accessibility Props

Property	Type	Description	Default
`aria_label`	`&'static str`	Label for accessibility.	`""`
`aria_required`	`&'static str`	Accessibility hint for required status.	`"true"`
`aria_invalid`	`&'static str`	Accessibility hint for invalid input.	`"true"`
`aria_describedby`	`&'static str`	Links the input to a description (e.g., error).	`""`

💡 Notes

The Input component can be used for various input types like text, password, etc.
You can bind the component to state hooks for two-way data binding.
Utilize validate_function to validate user input and display error messages.
The eye_active and eye_disabled props allow for password visibility toggling with FontAwesome icons.
Customize the appearance with CSS classes for better integration into your app's design.

Usage

CLI Usage

You can import Input RS directly into your project to customize and modify it using the opensass cli:

os add input-rs dio

Edit Component

🌱 Leptos Input RS Usage

Adding Input RS to your Leptos project is simple:

Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.
Add input-rs to your dependencies:
```
cargo add input-rs --features=lep
```
Import the Input component into your Leptos component and start using it in your app.

🛠️ Usage

Incorporating the Input component into your Leptos application is easy. Follow these steps:

Import the Input component into your Leptos project:

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

Use the Input component within your Leptos application:

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


fn validate_input(value: String) -> bool {
    !value.trim().is_empty()
}

#[component]
pub fn app() -> 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_input}
                    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_input}
                    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>
    }
}

🔧 Props

`Input` Props

Main Props

Property	Type	Description	Default
`r#type`	`&'static str`	The type of the input element (e.g., `text`, `password`).	`"text"`
`handle`	`(ReadSignal<String>, WriteSignal<String>)`	State handle for managing the value of the input.	`""`
`valid_handle`	`(ReadSignal<bool>, WriteSignal<bool>)`	State handle for managing the validity state of the input.	`""`
`validate_function`	`fn(String) -> bool`	Callback function to validate the input value.	`""`
`error_message`	`&'static str`	Error message displayed when the input is invalid.	`""`

Accessibility and SEO Props

Property	Type	Description	Default
`id`	`&'static str`	The ID attribute of the input element.	`""`
`aria_label`	`&'static str`	The aria-label for screen readers.	`""`
`aria_required`	`&'static str`	Indicates whether the input is required.	`"true"`
`aria_invalid`	`&'static str`	Indicates whether the input value is invalid.	`"true"`
`aria_describedby`	`&'static str`	Describes the input element's error message for screen readers.	`""`

Styling Props

Property	Type	Description	Default
`class`	`&'static str`	The CSS class for the container element of the input.	`""`
`input_class`	`&'static str`	The CSS class for the inner input element.	`""`
`field_class`	`&'static str`	The CSS class for the input field.	`""`
`label_class`	`&'static str`	The CSS class for the label element.	`""`
`error_class`	`&'static str`	The CSS class for the error message container.	`""`
`icon_class`	`&'static str`	The CSS class for the icon element (for password visibility toggle).	`""`

Behavioral Props

Property	Type	Description	Default
`eye_active`	`&'static str`	The icon used when the password is visible.	`"fa fa-eye"`
`eye_disabled`	`&'static str`	The icon used when the password is not visible.	`"fa fa-eye-slash"`

Additional Props

Property	Type	Description	Default
`placeholder`	`&'static str`	The placeholder text displayed in the input element.	`""`
`required`	`bool`	Specifies whether the input is required or not.	`false`
`disabled`	`bool`	Disables the input when true.	`false`
`readonly`	`bool`	Makes the input read-only when true.	`false`

Input Element Specific Attributes

Property	Type	Description	Default
`size`	`Option<u32>`	The size of the input element (character width).	`None`
`maxlength`	`Option<usize>`	The maximum number of characters allowed in the input.	`None`
`pattern`	`&'static str`	Regex pattern for input validation.	`".*"`
`minlength`	`Option<usize>`	The minimum length of the input value.	`None`
`multiple`	`bool`	Whether multiple values are allowed (for file or email inputs).	`false`

Behavioral Props

Property	Type	Description	Default
`onchange`	`Callback<String>`	Callback triggered when the input value changes.	No-op

💡 Notes

The Input component can be used for various input types like text, password, etc.
You can bind the component to state hooks for two-way data binding.
Utilize validate_function to validate user input and display error messages.
The eye_active and eye_disabled props allow for password visibility toggling with FontAwesome icons.
Customize the appearance with CSS classes for better integration into your app's design.

Usage

CLI Usage

You can import Input RS directly into your project to customize and modify it using the opensass cli:

os add input-rs lep

Open SASS Components Kit