diff --git a/Cargo.toml b/Cargo.toml
index 9fb003d..3b337e9 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -3,7 +3,7 @@ name = "input-rs"
 version = "0.2.3"
 edition = "2021"
 rust-version = "1.79"
-description = "A feature-rich, accessible, highly customizable, functional, reusable input component for Wasm Frameworks."
+description = "🔤 A highly customizable input component for WASM frameworks like Yew, Dioxus, and Leptos."
 license = "Apache-2.0"
 keywords = ["input", "yew", "dioxus", "leptos", "input-rs"]
 categories = ["web-programming", "science"]
@@ -17,8 +17,8 @@ exclude = ["assets", "examples"]
 [dependencies]
 web-sys = { version = "0.3", default-features = false }
 yew = { version = "0.21.0", default-features = false, optional = true }
-dioxus = { version = "0.5", optional = true }
-leptos = { version = "0.7.0", optional = true }
+dioxus = { version = "0.6.1", optional = true }
+leptos = { version = "0.7.2", optional = true }
 
 [dev-dependencies]
 bump2version = "0.1.4"
@@ -39,5 +39,9 @@ panic = "abort"
 strip = "symbols"
 incremental = false
 
+[package.metadata.docs.rs]
+all-features = true
+rustdoc-args = ["--cfg", "docsrs"]
+
 [badges]
 maintenance = { status = "actively-developed" }
diff --git a/DIOXUS.md b/DIOXUS.md
new file mode 100644
index 0000000..b0d255c
--- /dev/null
+++ b/DIOXUS.md
@@ -0,0 +1,127 @@
+# 🧬 Input RS Dioxus Usage
+
+Adding Input RS to your project is simple:
+
+1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions.
+
+1. Add the Input component to your dependencies by including it in your `Cargo.toml` file.
+
+   ```sh
+   cargo add input-rs --features=dio
+   ```
+
+1. 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:
+
+1. Import `Input` into your component:
+
+   ```rust
+   use dioxus::prelude::*;
+   use input_rs::dioxus::Input;
+   ```
+
+1. Use the `Input` component in your application:
+
+   ```rust
+   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
+
+```sh
++-----------------------------+  <-- `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.
diff --git a/LEPTOS.md b/LEPTOS.md
new file mode 100644
index 0000000..eddea7e
--- /dev/null
+++ b/LEPTOS.md
@@ -0,0 +1,194 @@
+# 🌱 Leptos Input RS Usage
+
+Adding Input RS to your Leptos project is simple:
+
+1. Make sure your project is set up with Leptos. Refer to their [Getting Started Guide](https://book.leptos.dev/getting_started/index.html) for setup instructions.
+
+1. Add `input-rs` to your dependencies:
+
+   ```sh
+   cargo add input-rs --features=lep
+   ```
+
+1. 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:
+
+1. Import the `Input` component into your Leptos project:
+
+   ```rust
+   use leptos::{prelude::*, *};
+   use input_rs::leptos::Input;
+   use regex::Regex;
+   ```
+
+1. Use the `Input` component within your Leptos application:
+
+   ```rust
+   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.
diff --git a/LICENSE b/LICENSE
index 8f1b239..f11a67d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -2,180 +2,180 @@
                            Version 2.0, January 2004
                         http://www.apache.org/licenses/
 
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
 
       To apply the Apache License to your work, attach the following
       boilerplate notice, with the fields enclosed by brackets "[]"
@@ -186,16 +186,16 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2024 Mahmoud Harmouch
+Copyright 2024 Open SASS Core Maintainers
 
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
        http://www.apache.org/licenses/LICENSE-2.0
 
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/README.md b/README.md
index 0842bc3..f478cc1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
 
-# 🎡 Input RS 📥
+# 🔤 Input RS
 
 [![Crates.io](https://img.shields.io/crates/v/input-rs)](https://crates.io/crates/input-rs)
 [![Crates.io Downloads](https://img.shields.io/crates/d/input-rs)](https://crates.io/crates/input-rs)
@@ -11,203 +11,63 @@
 
 [![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)
 
-![logo](./assets/logo-new.png)
+<!-- absolute url for docs.rs cause assets is excluded from crate -->
+![logo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png)
 
 </div>
 
 ## 🎬 Demo
-
+<!-- absolute urls for docs.rs cause assets is excluded from crate -->
 | Input Type | Demo                                         |
 | ---------- | -------------------------------------------- |
-| Text       | ![text-demo](./assets/text-demo.gif)         |
-| Password   | ![pass-demo](./assets/pass-demo.gif)         |
-| Textarea   | ![textarea-demo](./assets/textarea-demo.gif) |
-| Telephone  | ![tel-demo](./assets/tel-demo.gif)           |
+| Text       | ![text-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/text-demo.gif)         |
+| Password   | ![pass-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/pass-demo.gif)         |
+| Textarea   | ![textarea-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/textarea-demo.gif) |
+| Telephone  | ![tel-demo](https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/tel-demo.gif)           |
+
+| Framework | Live Demo |
+| --- | --- |
+| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/45d208ab-8b1b-4608-bcb1-f7d3d049cac5/deploy-status)](https://input-rs.netlify.app) |
+| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/b94e6586-192b-4db8-bc09-b287366c9731/deploy-status)](https://input-rs-dioxus.netlify.app) |
+| Leptos | [![Netlify Status](https://api.netlify.com/api/v1/badges/7b6175fa-892b-4a05-9fd5-b425b399e48f/deploy-status)](https://input-rs-leptos.netlify.app) |
 
 ### 📜 Intro
 
 A reusable input component built for WASM frameworks like Yew, Dioxus, and Leptos. It's customizable, accessible, and designed to simplify creating dynamic input fields in your applications.
 
-### 🤔 Why Use It?
-
-1. **🔄 Reusable**: Write once, use anywhere in your app.
-2. **🎨 Customizable**: Easily adjust styles and behavior to fit your needs.
-3. **✔️ Validations**: Add custom validation functions effortlessly.
-4. **🎫 Event Handling**: Supports `oninput`, `onchange`, etc events for dynamic interactions.
-5. **♿ Accessible**: User-friendly and built for inclusivity.
-6. **❌ Error Handling**: Displays clear error messages for invalid input.
-
-## ⚙️ Yew Installation
-
-You can quickly integrate this Custom Reusable Input Component into your Yew project by following these simple steps:
-
-1. First, make sure you have Yew set up in your project. If not, check out the [Yew documentation](https://yew.rs/docs/getting-started/introduction) for installation instructions.
-
-1. Then, install the input component package using your preferred package manager:
-
-   ```sh
-   $ cargo add input-rs --features=yew
-   ```
-
-1. Finally, import the component into your Yew application and start using it to power up your forms and user interactions.
-
-### 🛠️ Usage
-
-Using this custom reusable input component is a breeze! Simply follow these steps:
-
-1. Import the component into your Yew application:
-
-   ```rust
-   // Add these lines at the beginning of your file, make sure you have `regex` installed for input validation.
-   use yew::prelude::*;
-   use regex::Regex;
-   use input_rs::yew::Input;
-   ```
-
-1. Use the `Input` component wherever you need an input field:
-
-   ```rust
-   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(LoginForm)]
-   pub fn login_form() -> Html {
-       let input_email_ref = use_node_ref();
-       let input_email_handle = use_state(String::default);
-       let email_valid_handle = use_state(|| true);
-       let onsubmit = Callback::from(move |event: SubmitEvent| {});
-       html! {
-             <form action="#" aria-label="Sign In Form" onsubmit={onsubmit}>
-                 <Input
-                   r#type={"text"}
-                   handle={input_email_handle}
-                   name={"email"}
-                   r#ref={input_email_ref}
-                   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}
-                 />
-             </form>
-       }
-   }
-   ```
-
-1. Customize the input component's appearance and behavior according to your project requirements.
-
-## 🔧 Props
-
-### 🖊️ Input Properties
-
-| Name            | Type           | Description                                                                      | Example                                   | Default Value |
-| --------------- | -------------- | -------------------------------------------------------------------------------- | ----------------------------------------- | ------------- |
-| `type`          | `&'static str` | The type of the input, e.g., `"text"`, `"password"`, `"tel"`, `"textarea"`, etc. | `"text"`, `"password"`, `"email"`.        | `"text"`      |
-| `label`         | `&'static str` | The label to be displayed for the input field.                                   | `"Username"`, `"Email"`.                  | `""`          |
-| `name`          | `&'static str` | The name of the input field, used for form submission and accessibility.         | `"username"`, `"email"`.                  | `""`          |
-| `required`      | `bool`         | Indicates whether the input is required or not.                                  | `true`, `false`.                          | `false`       |
-| `ref`           | `NodeRef`      | A reference to the DOM node of the input element.                                | `use_node_ref()`.                         | -             |
-| `error_message` | `&'static str` | The error message to display when there is a validation error.                   | `"Invalid input"`, `"Field is required"`. | `""`          |
-
-### 🎨 Styling Properties
-
-```sh
-+-----------------------------+  <-- `class`
-|                             |
-|  +-----------------------+  |  <-- `label_class`
-|  |       Label           |  |
-|  +-----------------------+  |
-|                             |
-|  +-----------------------+  |  <-- `field_class`
-|  | +-------+  +--------+ |  |
-|  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
-|  | +-------+  +--------+ |  |
-|  +-----------------------+  |
-|                             |
-|  +-----------------------+  |  <-- `error_class` (if invalid)
-|  |       Error Message   |  |
-|  +-----------------------+  |
-+-----------------------------+
-```
-
-| Name          | Type           | Description                                                      | Example                                    | Default Value |
-| ------------- | -------------- | ---------------------------------------------------------------- | ------------------------------------------ | ------------- |
-| `class`       | `&'static str` | The CSS class to be applied to all inner elements.               | `"form-input-container"`, `"input-group"`. | `""`          |
-| `field_class` | `&'static str` | The CSS class to be applied to the inner input element and icon. | `"form-input-field"`, `"input-icon"`.      | `""`          |
-| `label_class` | `&'static str` | The CSS class to be applied to the label for the input element.  | `"form-input-label"`.                      | `""`          |
-| `input_class` | `&'static str` | The CSS class to be applied to the input element.                | `"custom-input"`.                          | `""`          |
-| `error_class` | `&'static str` | The CSS class to be applied to the error div element.            | `"input-error-message"`.                   | `""`          |
-| `icon_class`  | `&'static str` | The CSS class to be applied to the icon element.                 | `"input-icon"`.                            | `""`          |
-
-### 🧠 State and Callback Properties
-
-| Name                | Type                     | Description                              | Example          | Default Value |
-| ------------------- | ------------------------ | ------------------------------------------- | ---------------- | ------------- |
-| `handle`            | `UseStateHandle<String>` | The state handle for managing the value of the input.                                               | `use_state(\|\| "".to_string())`. | -   |
-| `valid_handle`      | `UseStateHandle<bool>`   | The state handle for managing the validity state of the input.                                      | `use_state(\|\| true)`.           | -   |
-| `validate_function` | `Callback<String, bool>` | A callback function to validate the input value. It takes a `String` as input and returns a `bool`. | `Callback::from(\|value\| value.len() > 3)` | -   |
-
-### 👁️ Password Icon Properties
-
-| Name           | Type           | Description                                | Example                            | Default Value                                                                         |
-| -------------- | -------------- | ------------------------------------------ | ---------------------------------- | ------------------------------------------------------------------------------------- |
-| `eye_active`   | `&'static str` | The icon when the password is visible.     | `"fa fa-eye"` (FontAwesome).       | `"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye"`       |
-| `eye_disabled` | `&'static str` | The icon when the password is not visible. | `"fa fa-eye-slash"` (FontAwesome). | `"cursor-pointer right-4 top-1 text-2xl text-gray-600 toggle-button fa fa-eye-slash"` |
-
-### ♿ Accessibility and SEO Properties
-
-| Name               | Type           | Description                                                                                      | Example                                              | Default Value |
-| ------------------ | -------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ------------- |
-| `id`               | `&'static str` | The ID attribute of the input element.                                                           | `"input-username"`, `"input-email"`.                 | `""`          |
-| `placeholder`      | `&'static str` | The placeholder text to be displayed in the input element.                                       | `"Enter your username"`, `"Type your email"`.        | `""`          |
-| `aria_label`       | `&'static str` | The aria-label attribute for screen readers, providing a label for accessibility.                | `"Username input"`, `"Email input"`.                 | `""`          |
-| `aria_required`    | `&'static str` | The aria-required attribute for screen readers, indicating whether the input is required.        | `"true"`, `"false"`.                                 | `"true"`      |
-| `aria_invalid`     | `&'static str` | The aria-invalid attribute for screen readers, indicating whether the input value is invalid.    | `"true"`, `"false"`.                                 | `"true"`      |
-| `aria_describedby` | `&'static str` | The aria-describedby attribute for screen readers, describing the input element's error message. | `"error-message-username"`, `"error-message-email"`. | `""`          |
-
-### 🖼️ Image and Media Properties
-
-| Name     | Type           | Description                                                       | Example                  | Default Value |
-| -------- | -------------- | ----------------------------------------------------------------- | ------------------------ | ------------- |
-| `src`    | `&'static str` | The address of the image resource for `<input type="image">`.     | `"image.png"`.           | `""`          |
-| `alt`    | `&'static str` | The alternative text for `<input type="image">`.                  | `"Submit button image"`. | `""`          |
-| `height` | `Option<u32>`  | Height of the input (same as the `height` attribute for `<img>`). | `Some(100)`.             | `None`        |
-| `width`  | `Option<u32>`  | Width of the input (same as the `width` attribute for `<img>`).   | `Some(200)`.             | `None`        |
-
-### ⏱️ Date and Number Input Properties
-
-| Name   | Type           | Description                                      | Example                  | Default Value |
-| ------ | -------------- | ------------------------------------------------ | ------------------------ | ------------- |
-| `min`  | `&'static str` | The minimum value for date, number, range, etc.  | `"2023-01-01"`, `"10"`.  | `""`          |
-| `max`  | `&'static str` | The maximum value for date, number, range, etc.  | `"2024-01-01"`, `"100"`. | `""`          |
-| `step` | `&'static str` | Incremental values that are valid for the input. | `"1"`, `"0.01"`.         | `""`          |
-
-### 📂 File Input Properties
-
-| Name       | Type           | Description                                                      | Example            | Default Value |
-| ---------- | -------------- | ---------------------------------------------------------------- | ------------------ | ------------- |
-| `accept`   | `&'static str` | Hint for expected file type in file upload controls.             | `".png, .jpg"`.    | `""`          |
-| `capture`  | `&'static str` | Media capture input method in file upload controls.              | `"user"`, `"env"`. | `""`          |
-| `multiple` | `bool`         | Boolean indicating whether multiple file selections are allowed. | `true`, `false`.   | `false`       |
-
-## 📙 Examples
-
-Lots of examples we built use it to create even more sophisticated forms like Contact Us forms, multi-step forms, and login forms. If you're curious about how to use it, you can check out [the examples folder](examples) for more information.
-
-## 🤝 Contribution
-
-We welcome contributions from the community to make this input component even better! Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate and create something amazing together!
+## 🤔 Why Use Input RS?
+
+The following features make Input RS a must-have for your WASM-based projects:
+
+1. **🎨 Advanced Customization**: Style inputs with custom classes, inline styles, and themes to suit your app's design.
+1. **🔑 Flexible Input Types**: Supports text, password, phone number, and more with built-in validation.
+1. **⚡ Interactive Callbacks**: Efficiently handle value changes and validity checks with customizable callback functions.
+1. **🧩 Accessibility**: Built-in ARIA attributes for screen readers and other assistive technologies.
+1. **📞 Phone Number Validation**: Dynamic phone number parsing with country code support.
+
+## Y Yew Usage
+
+<!-- absolute url for docs.rs cause YEW.md is not included in crate -->
+Refer to [our guide](https://github.com/opensass/input-rs/blob/main/YEW.md) to integrate this component into your Yew app.
+
+## 🧬 Dioxus Usage
+
+<!-- absolute url for docs.rs cause DIOXUS.md is not included in crate -->
+Refer to [our guide](https://github.com/opensass/input-rs/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.
+
+## 🌱 Leptos Usage
+
+<!-- absolute url for docs.rs cause LEPTOS.md is not included in crate -->
+Refer to [our guide](https://github.com/opensass/input-rs/blob/main/LEPTOS.md) to integrate this component into your Leptos app.
+
+## 🤝 Contributions
+
+Contributions are welcome! Whether it's bug fixes, feature requests, or examples, we would love your help to make Input RS better.
+
+1. Fork the repository.
+1. Create a new branch for your feature/bugfix.
+1. Submit a pull request for review.
 
 ## 📜 License
 
-This input component is licensed under the `Apache-2.0` License, giving you the freedom to use, modify, and distribute it as you see fit. Please check the [`LICENSE`](LICENSE) file for more details.
+Input RS is licensed under the [Apache License](LICENSE). You are free to use, modify, and distribute this library in your projects.
diff --git a/YEW.md b/YEW.md
new file mode 100644
index 0000000..f0c2d11
--- /dev/null
+++ b/YEW.md
@@ -0,0 +1,137 @@
+# Y Input RS Yew Usage
+
+Adding Input RS to your project is simple:
+
+1. Make sure your project is set up with **Yew**. Follow their [Getting Started Guide](https://yew.rs/docs/getting-started/introduction) for setup instructions.
+
+1. Add the Input RS component to your dependencies by including it in your `Cargo.toml` file:
+
+   ```sh
+   cargo add input-rs --features=yew
+   ```
+
+1. 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:
+
+1. Import the `Input` component into your Yew project:
+
+   ```rust
+   use yew::prelude::*;
+   use input_rs::yew::Input;
+   use regex::Regex;
+   ```
+
+1. Use the `Input` component within your Yew application:
+
+   ```rust
+   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
+
+```sh
++-----------------------------+  <-- `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.
diff --git a/examples/dioxus/Cargo.toml b/examples/dioxus/Cargo.toml
index 72889bb..4778463 100755
--- a/examples/dioxus/Cargo.toml
+++ b/examples/dioxus/Cargo.toml
@@ -4,7 +4,19 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-dioxus = { version = "0.5.6", features = ["web"] }
+dioxus = { version = "0.6.1", features = ["web"] }
 input-rs = { path = "../../", features = ["dio"] }
-dioxus-logger = "0.5.1"
+dioxus-logger = "0.6.1"
 regex = "1.11.1"
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"
diff --git a/examples/leptos/Cargo.toml b/examples/leptos/Cargo.toml
index b82b9b9..4b04edb 100755
--- a/examples/leptos/Cargo.toml
+++ b/examples/leptos/Cargo.toml
@@ -6,8 +6,7 @@ edition = "2021"
 [dependencies]
 console_error_panic_hook = "0.1.7"
 input-rs = { path = "../../", features = ["lep"] }
-leptos = { version = "0.7.0", features = ["csr"] }
-log = "0.4.22"
+leptos = { version = "0.7.2", features = ["csr"] }
 regex = "1.11.1"
 serde = "1.0.215"
 wasm-logger = "0.2.0"
diff --git a/examples/leptos/src/main.rs b/examples/leptos/src/main.rs
index cbd3d1a..7ecb1a9 100755
--- a/examples/leptos/src/main.rs
+++ b/examples/leptos/src/main.rs
@@ -2,6 +2,7 @@ use input_rs::leptos::Input;
 use leptos::{prelude::*, task::spawn_local};
 use regex::Regex;
 use serde::{Deserialize, Serialize};
+use leptos::logging::log;
 
 #[derive(Debug, Default, Clone, Serialize, Deserialize)]
 struct LoginUserSchema {
@@ -52,7 +53,7 @@ fn LoginForm() -> impl IntoView {
         spawn_local(async move {
             if email_valid && password_valid {
                 // API call
-                log::info!(
+                log!(
                     "Logged in with Email: {}, Password: {}",
                     email_ref,
                     password_ref
diff --git a/src/leptos.rs b/src/leptos.rs
index 21e85e2..6668b7b 100644
--- a/src/leptos.rs
+++ b/src/leptos.rs
@@ -1,7 +1,7 @@
 #![allow(unused)]
 
 use crate::countries::COUNTRY_CODES;
-use leptos::{prelude::*, *};
+use leptos::{ev::MouseEvent, prelude::*, *};
 
 /// A custom input component that handles user input and validation.
 ///
@@ -336,7 +336,6 @@ pub fn Input(
     let input_ref: NodeRef<html::Input> = NodeRef::new();
 
     let onchange = {
-        let validate_function = validate_function.clone();
         move |ev: web_sys::Event| {
             let input_value = input_ref.get().expect("<input> should be mounted").value();
             handle.1.set(input_value.clone());
@@ -345,7 +344,7 @@ pub fn Input(
     };
 
     let on_toggle_password = {
-        move |ev: web_sys::Event| {
+        move |ev: MouseEvent| {
             if eye_active_handle.get() {
                 set_password_type.set("password".to_string());
             } else {
@@ -355,9 +354,9 @@ pub fn Input(
         }
     };
 
-    // TODO: Fix me. Matching logic in Leptos is such a pain.
     let tag = {
-        move || match r#type {
+        move || {
+            match r#type {
             "password" => Some(view! {
                 <>
                     <input
@@ -388,19 +387,18 @@ pub fn Input(
                         max={max}
                         accept={accept}
                     />
-                    // <span
-                    //     class={if eye_active_handle.get() { eye_active } else { eye_disabled }}
-                    //     on:click={on_toggle_password}
-                    // />
+                    <span
+                        class={if eye_active_handle.get() { eye_active } else { eye_disabled }}
+                        on:click={on_toggle_password}
+                    />
                 </>
-            }),
+            }.into_any()),
             // "textarea" => Some(view! {
             //     <>
             //         <textarea
             //             class={input_class}
             //             id={id}
             //             name={name}
-            //             value={handle.get()}
             //             placeholder={placeholder}
             //             aria-label={aria_label}
             //             aria-required={aria_required}
@@ -409,26 +407,27 @@ pub fn Input(
             //             on:input={onchange}
             //             required={required}
             //             node_ref={input_ref}
-            //             autocomplete={autocomplete}
-            //             autocapitalize={autocapitalize}
-            //             readonly={readonly}
-            //             minlength={minlength.map(|v| v.to_string())}
-            //             maxlength={maxlength.map(|v| v.to_string())}
-            //             disabled={disabled}
             //         />
             //     </>
-            // }),
+            // }.into_any()),
             "tel" => Some(view! {
                 <>
-                    // <select class={field_class} on:change={onchange}>
-                    //     { for (code, emoji, _, name, _, _) in COUNTRY_CODES {
-                    //         view! {
-                    //             <option value={*code} selected={*code == handle.get()}>{ format!("{} {} {}", emoji, name, code) }</option>
-                    //         }
-                    //     } }
-                    // </select>
+                    <select class={field_class} on:change={onchange}>
+                        <For
+                            each=move || COUNTRY_CODES
+                            key=|country| *country
+                            let:country
+                        >
+                            {move || {
+                                let (code, emoji, _, name, _, _) = country;
+                                view! {
+                                    <option value={code} selected={*code == handle.0.get()}>{ format!("{} {} {}", emoji, name, code) }</option>
+                                }
+                            }}
+                        </For>
+                    </select>
                     <input
-                        r#type={"tel".to_string()}
+                        r#type={"tel"}
                         class={input_class}
                         id={id}
                         name={name}
@@ -456,7 +455,7 @@ pub fn Input(
                         accept={accept}
                     />
                 </>
-            }),
+            }.into_any()),
             _ => Some(view! {
                 <>
                     <input
@@ -488,7 +487,8 @@ pub fn Input(
                         accept={accept}
                     />
                 </>
-            }),
+            }.into_any()),
+        }
         }
     };
 
diff --git a/src/lib.rs b/src/lib.rs
index a548c00..5b446dd 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,6 +1,6 @@
 #![doc(
-    html_logo_url = "https://github.com/opensass/input-rs/blob/main/assets/logo-new.png",
-    html_favicon_url = "https://github.com/opensass/input-rs/blob/main/assets/favicon.png"
+    html_logo_url = "https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/logo-new.png",
+    html_favicon_url = "https://raw.githubusercontent.com/opensass/input-rs/refs/heads/main/assets/favicon.png"
 )]
 #![cfg_attr(docsrs, feature(doc_auto_cfg))]
 #![doc = include_str!("../README.md")]