diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
index 35adeb9..7354a96 100644
--- a/.github/workflows/rust.yml
+++ b/.github/workflows/rust.yml
@@ -2,21 +2,20 @@ name: Rust
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 env:
   CARGO_TERM_COLOR: always
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Build
-      run: cargo build --verbose
-    - name: Run tests
-      run: cargo test --all-features --verbose
+      - uses: actions/checkout@v3
+      - name: Build
+        run: cargo build --verbose
+      - name: Run tests
+        run: cargo test --all-features --verbose
diff --git a/Cargo.toml b/Cargo.toml
index 4c8eda4..e72d99b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -15,15 +15,15 @@ exclude = ["assets", "examples"]
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-web-sys = { version = "0.3", default-features = false }
-yew = { version = "0.22.0", default-features = false, optional = true }
-dioxus = { version = "0.6.3", optional = true }
-leptos = { version = "0.7.7", optional = true }
+web-sys = { version = "0.3.106", default-features = false }
+yew = { version = "0.23.0", default-features = false, optional = true }
+dioxus = { version = "0.7.10", optional = true }
+leptos = { version = "0.8.21", optional = true }
 
 [dev-dependencies]
-bump2version = "0.1.4"
-regex = "1.10.2"
-serde = { version = "1.0.193", features = ["derive"] }
+bump2version = "0.2.2"
+regex = "1.13.1"
+serde = { version = "1.0.229", features = ["derive"] }
 
 [features]
 yew = ["dep:yew", ]
diff --git a/DIOXUS.md b/DIOXUS.md
index b0d255c..28d73a6 100644
--- a/DIOXUS.md
+++ b/DIOXUS.md
@@ -2,7 +2,7 @@
 
 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. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.7/getting_started) for setup instructions.
 
 1. Add the Input component to your dependencies by including it in your `Cargo.toml` file.
 
diff --git a/README.md b/README.md
index 7799825..919dbd4 100644
--- a/README.md
+++ b/README.md
@@ -12,24 +12,27 @@
 [![Open SASS Discord](https://dcbadge.limes.pink/api/server/b5JbvHW5nv)](https://discord.gg/b5JbvHW5nv)
 
 <!-- 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                                         |
-| ---------- | -------------------------------------------- |
+
+| Input Type | Demo                                                                                                           |
+| ---------- | -------------------------------------------------------------------------------------------------------------- |
 | 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) |
+| 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
 
@@ -48,16 +51,19 @@ The following features make Input RS a must-have for your WASM-based projects:
 ## 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
diff --git a/examples/dioxus/Cargo.toml b/examples/dioxus/Cargo.toml
index c19b518..f7b6f59 100755
--- a/examples/dioxus/Cargo.toml
+++ b/examples/dioxus/Cargo.toml
@@ -4,10 +4,10 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-dioxus = { version = "0.6.3", features = ["web"] }
+dioxus = { version = "0.7.10", features = ["web"] }
 input-rs = { path = "../../", features = ["dio"] }
-dioxus-logger = "0.6.2"
-regex = "1.11.1"
+dioxus-logger = "0.7.10"
+regex = "1.13.1"
 
 [profile]
 
diff --git a/examples/dioxus/README.md b/examples/dioxus/README.md
index 842628e..c817f43 100644
--- a/examples/dioxus/README.md
+++ b/examples/dioxus/README.md
@@ -40,7 +40,7 @@
    sudo apt install build-essential pkg-config libudev-dev
    ```
 
-1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.5/getting_started):
+1. Install [`Dioxus CLI`](https://dioxuslabs.com/learn/0.7/getting_started):
 
    ```sh
    cargo install dioxus-cli
diff --git a/examples/leptos/Cargo.toml b/examples/leptos/Cargo.toml
index 4b04edb..3329e7e 100755
--- a/examples/leptos/Cargo.toml
+++ b/examples/leptos/Cargo.toml
@@ -6,7 +6,7 @@ edition = "2021"
 [dependencies]
 console_error_panic_hook = "0.1.7"
 input-rs = { path = "../../", features = ["lep"] }
-leptos = { version = "0.7.2", features = ["csr"] }
-regex = "1.11.1"
-serde = "1.0.215"
+leptos = { version = "0.8.21", features = ["csr"] }
+regex = "1.13.1"
+serde = "1.0.229"
 wasm-logger = "0.2.0"
diff --git a/examples/leptos/index.html b/examples/leptos/index.html
index 5b1dd65..eef6567 100755
--- a/examples/leptos/index.html
+++ b/examples/leptos/index.html
@@ -1,9 +1,15 @@
 <!doctype html>
 <html>
   <head>
-    <link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
-    <script src="https://kit.fontawesome.com/8f223ead6e.js" crossorigin="anonymous"></script>
-    <link data-trunk rel="rust"/>
+    <link
+      href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <script
+      src="https://kit.fontawesome.com/8f223ead6e.js"
+      crossorigin="anonymous"
+    ></script>
+    <link data-trunk rel="rust" />
     <base data-trunk-public-url />
   </head>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/leptos/src/main.rs b/examples/leptos/src/main.rs
index 7ecb1a9..ed15792 100755
--- a/examples/leptos/src/main.rs
+++ b/examples/leptos/src/main.rs
@@ -1,8 +1,8 @@
 use input_rs::leptos::Input;
+use leptos::logging::log;
 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 {
diff --git a/examples/yew/Cargo.toml b/examples/yew/Cargo.toml
index fe8810d..8f31ddd 100644
--- a/examples/yew/Cargo.toml
+++ b/examples/yew/Cargo.toml
@@ -2,21 +2,21 @@
 name = "yew-input-rs"
 version = "0.1.0"
 authors = ["Mahmoud Harmouch <oss@wiseai.dev>"]
-edition = "2021"
+edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
 input-rs = { path = "../..", features = ["yew"] }
-regex = { version = "1.9.1", default-features = false }
+regex = { version = "1.13.1", default-features = false }
 reqwasm = { version = "0.5.0", default-features = false }
-serde = { version = "1.0.178", default-features = false }
-serde_json = { version = "1.0.104", default-features = false }
-wasm-bindgen = { version = "0.2.87", default-features = false }
-wasm-bindgen-futures = { version = "0.4.37", default-features = false }
-web-sys = { version = "0.3.64", default-features = false }
-yew = { version = "0.22.0", features = ["csr"], default-features = false }
-yew-router = { version = "0.19.0", default-features = false }
+serde = { version = "1.0.229", default-features = false }
+serde_json = { version = "1.0.151", default-features = false }
+wasm-bindgen = { version = "0.2.129", default-features = false }
+wasm-bindgen-futures = { version = "0.4.79", default-features = false }
+web-sys = { version = "0.3.106", default-features = false }
+yew = { version = "0.23.0", features = ["csr"], default-features = false }
+yew-router = { version = "0.20.0", default-features = false }
 
 [profile.release]
 codegen-units = 1
diff --git a/examples/yew/README.md b/examples/yew/README.md
index fd753c7..8d00046 100644
--- a/examples/yew/README.md
+++ b/examples/yew/README.md
@@ -86,20 +86,20 @@ This section lists components implemented using the [Tailwind CSS](https://tailw
 
 ### 🔐 Login Forms
 
-| ID | Preview | Demo | Localhost |
-|---|---|---|---|
-| 1 | ![Component 1](./assets/form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-1.netlify.app/) | [Localhost](http://localhost:3000/login/1) |
-| 2 | ![Component 2](./assets/form-two.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-2.netlify.app/) | [Localhost](http://localhost:3000/login/2) |
-| 3 | ![Component 3](./assets/form-three.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-3.netlify.app/) | [Localhost](http://localhost:3000/login/3) |
+| ID  | Preview                                 | Demo                                                                                                                                                      | Localhost                                  |
+| --- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| 1   | ![Component 1](./assets/form-one.png)   | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-1.netlify.app/) | [Localhost](http://localhost:3000/login/1) |
+| 2   | ![Component 2](./assets/form-two.png)   | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-2.netlify.app/) | [Localhost](http://localhost:3000/login/2) |
+| 3   | ![Component 3](./assets/form-three.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-3.netlify.app/) | [Localhost](http://localhost:3000/login/3) |
 
 ### 📬 Contact Forms
 
-| ID | Preview | Demo | Localhost |
-|---|---|---|---|
-| 1 | ![Component 1](./assets/contact-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-contact-form-1.netlify.app/) | [Localhost](http://localhost:3000/contact/1) |
+| ID  | Preview                                       | Demo                                                                                                                                                        | Localhost                                    |
+| --- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| 1   | ![Component 1](./assets/contact-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-contact-form-1.netlify.app/) | [Localhost](http://localhost:3000/contact/1) |
 
 ### 🔢 Multi-Steps Forms
 
-| ID | Preview | Demo | Localhost |
-|---|---|---|---|
-| 1 | ![Component 1](./assets/multi-step-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-multi-step-form-1.netlify.app/) | [Localhost](http://localhost:3000/multi-step/1) |
+| ID  | Preview                                          | Demo                                                                                                                                                           | Localhost                                       |
+| --- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| 1   | ![Component 1](./assets/multi-step-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-multi-step-form-1.netlify.app/) | [Localhost](http://localhost:3000/multi-step/1) |
diff --git a/examples/yew/index.html b/examples/yew/index.html
index bd63e56..35cc8d0 100644
--- a/examples/yew/index.html
+++ b/examples/yew/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <link data-trunk rel="tailwind-css" href="src/tailwind.css"/>
+    <link data-trunk rel="tailwind-css" href="src/tailwind.css" />
     <script
       src="https://kit.fontawesome.com/8f223ead6e.js"
       crossorigin="anonymous"
       defer
     ></script>
-    <link data-trunk rel="rust"/>
+    <link data-trunk rel="rust" />
     <title>Yew Tailwind Forms</title>
     <base data-trunk-public-url />
   </head>
diff --git a/examples/yew/postcss.config.js b/examples/yew/postcss.config.js
index 33ad091..12a703d 100644
--- a/examples/yew/postcss.config.js
+++ b/examples/yew/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/examples/yew/src/app.rs b/examples/yew/src/app.rs
index 0fc22ea..925ce5d 100644
--- a/examples/yew/src/app.rs
+++ b/examples/yew/src/app.rs
@@ -1,7 +1,7 @@
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-use crate::router::{switch, Route};
+use crate::router::{Route, switch};
 
 #[function_component(App)]
 pub fn app() -> Html {
diff --git a/examples/yew/src/components/contact_form_one.rs b/examples/yew/src/components/contact_form_one.rs
index de98ee3..60550a4 100644
--- a/examples/yew/src/components/contact_form_one.rs
+++ b/examples/yew/src/components/contact_form_one.rs
@@ -1,8 +1,8 @@
-use crate::components::common::{validate_email, validate_input, LoginUserSchema};
+use crate::components::common::{LoginUserSchema, validate_email, validate_input};
 use input_rs::yew::Input;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{console, HtmlInputElement, Window};
+use web_sys::{HtmlInputElement, Window, console};
 use yew::prelude::*;
 
 use crate::api::auth::login_user;
diff --git a/examples/yew/src/components/login_form_one.rs b/examples/yew/src/components/login_form_one.rs
index ef69ccf..33c66c8 100644
--- a/examples/yew/src/components/login_form_one.rs
+++ b/examples/yew/src/components/login_form_one.rs
@@ -1,8 +1,8 @@
-use crate::components::common::{validate_email, validate_input, LoginUserSchema};
+use crate::components::common::{LoginUserSchema, validate_email, validate_input};
 use input_rs::yew::Input;
 use regex::Regex;
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{console, HtmlInputElement, Window};
+use web_sys::{HtmlInputElement, Window, console};
 use yew::prelude::*;
 
 use crate::api::auth::login_user;
@@ -59,97 +59,101 @@ pub fn login_form_one() -> Html {
 
     html! {
         <div
-          class="min-h-screen bg-gradient-to-tr from-blue-500 to-purple-600 flex items-center justify-center"
+            class="min-h-screen bg-gradient-to-tr from-blue-500 to-purple-600 flex items-center justify-center"
         >
-          <div class="w-96 bg-white rounded-lg shadow-lg p-8">
-            <form class="flex flex-col space-y-6" onsubmit={onsubmit}>
-              if !error.is_empty() {
-                <div class="mb-3 error bg-red-600 text-white px-4 py-3 font-semibold rounded-md text-center text-base">{error}</div>
-              }
-              <span class="text-4xl text-gray-800 pb-6">{"Login"}</span>
-              <Input
-                r#type={"tek"}
-                label={"Email"}
-                handle={email_handle}
-                name={"username"}
-                r#ref={email_ref}
-                placeholder={"Your Email"}
-                icon_class={"text-2xl fa fa-person text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"}
-                error_message={"Enter a valid email address!"}
-                field_class={"relative"}
-                input_class={"input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"}
-                error_class={"text-red-500 absolute text-sm mb-2"}
-                required={true}
-                valid_handle={email_valid_handle}
-                validate_function={validate_email}
-              />
-              <Input
-                r#type={"password"}
-                label={"Password"}
-                handle={password_handle}
-                name={"password"}
-                r#ref={password_ref}
-                placeholder={"Password"}
-                icon_class={"text-2xl fa fa-lock text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"}
-                error_message={"Password can't be blank!"}
-                field_class={"relative mt-2 mb-2"}
-                input_class={"input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"}
-                error_class={"text-red-500 absolute text-sm"}
-                required={true}
-                valid_handle={password_valid_handle}
-                validate_function={validate_input}
-                eye_active={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"}
-                eye_disabled={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"}
-              />
-              <div class="w-full">
-                <button
-                  class="btn-social bg-indigo-600 hover:bg-indigo-700 text-white w-full py-3 rounded-lg text-base font-medium tracking-wide"
-                  type="submit"
-                >
-                  <i class="fa fa-box-arrow-in-right me-2"></i>
-                  {"Sign In"}
-                </button>
-              </div>
-              <div class="w-full text-center">
-                <span class="text-base text-gray-800">{"Not a member?"}</span>
-                <a href="#" class="text-base text-gray-800">{"Sign Up Now"}</a>
-              </div>
-              <div class="mt-8">
-                <div class="relative text-center text-gray-800 mt-4">
-                  <span class="px-4 bg-white relative z-10">{"Or Sign In With"}</span>
-                  <div class="absolute inset-0 flex items-center">
-                    <div class="w-full h-px bg-gray-400"></div>
-                  </div>
-                </div>
-                <div class="flex justify-center space-x-4 mt-12">
-                  <button
-                    class="btn-social bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
-                    aria-label="Sign in with Facebook"
-                  >
-                    <i class="fa fa-facebook"></i>
-                  </button>
-                  <button
-                    class="btn-social bg-red-600 hover:bg-red-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
-                    aria-label="Sign in with Google"
-                  >
-                    <i class="fa fa-google"></i>
-                  </button>
-                  <button
-                    class="btn-social bg-blue-400 hover:bg-blue-500 text-white w-12 h-12 rounded-lg text-xl leading-12"
-                    aria-label="Sign in with Twitter"
-                  >
-                    <i class="fa fa-twitter"></i>
-                  </button>
-                  <button
-                    class="btn-social bg-blue-900 hover:bg-blue-800 text-white w-12 h-12 rounded-lg text-xl leading-12"
-                    aria-label="Sign in with LinkedIn"
-                  >
-                    <i class="fa fa-linkedin"></i>
-                  </button>
-                </div>
-              </div>
-            </form>
-          </div>
+            <div class="w-96 bg-white rounded-lg shadow-lg p-8">
+                <form class="flex flex-col space-y-6" onsubmit={onsubmit}>
+                    if !error.is_empty() {
+                        <div
+                            class="mb-3 error bg-red-600 text-white px-4 py-3 font-semibold rounded-md text-center text-base"
+                        >
+                            { error }
+                        </div>
+                    }
+                    <span class="text-4xl text-gray-800 pb-6">{ "Login" }</span>
+                    <Input
+                        r#type="tek"
+                        label="Email"
+                        handle={email_handle}
+                        name="username"
+                        r#ref={email_ref}
+                        placeholder="Your Email"
+                        icon_class="text-2xl fa fa-person text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"
+                        error_message="Enter a valid email address!"
+                        field_class="relative"
+                        input_class="input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"
+                        error_class="text-red-500 absolute text-sm mb-2"
+                        required=true
+                        valid_handle={email_valid_handle}
+                        validate_function={validate_email}
+                    />
+                    <Input
+                        r#type="password"
+                        label="Password"
+                        handle={password_handle}
+                        name="password"
+                        r#ref={password_ref}
+                        placeholder="Password"
+                        icon_class="text-2xl fa fa-lock text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"
+                        error_message="Password can't be blank!"
+                        field_class="relative mt-2 mb-2"
+                        input_class="input w-full px-4 py-3 rounded-lg border border-gray-300 bg-gray-100 pl-12"
+                        error_class="text-red-500 absolute text-sm"
+                        required=true
+                        valid_handle={password_valid_handle}
+                        validate_function={validate_input}
+                        eye_active="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"
+                        eye_disabled="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"
+                    />
+                    <div class="w-full">
+                        <button
+                            class="btn-social bg-indigo-600 hover:bg-indigo-700 text-white w-full py-3 rounded-lg text-base font-medium tracking-wide"
+                            type="submit"
+                        >
+                            <i class="fa fa-box-arrow-in-right me-2" />
+                            { "Sign In" }
+                        </button>
+                    </div>
+                    <div class="w-full text-center">
+                        <span class="text-base text-gray-800">{ "Not a member?" }</span>
+                        <a href="#" class="text-base text-gray-800">{ "Sign Up Now" }</a>
+                    </div>
+                    <div class="mt-8">
+                        <div class="relative text-center text-gray-800 mt-4">
+                            <span class="px-4 bg-white relative z-10">{ "Or Sign In With" }</span>
+                            <div class="absolute inset-0 flex items-center">
+                                <div class="w-full h-px bg-gray-400" />
+                            </div>
+                        </div>
+                        <div class="flex justify-center space-x-4 mt-12">
+                            <button
+                                class="btn-social bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
+                                aria-label="Sign in with Facebook"
+                            >
+                                <i class="fa fa-facebook" />
+                            </button>
+                            <button
+                                class="btn-social bg-red-600 hover:bg-red-700 text-white w-12 h-12 rounded-lg text-xl leading-12"
+                                aria-label="Sign in with Google"
+                            >
+                                <i class="fa fa-google" />
+                            </button>
+                            <button
+                                class="btn-social bg-blue-400 hover:bg-blue-500 text-white w-12 h-12 rounded-lg text-xl leading-12"
+                                aria-label="Sign in with Twitter"
+                            >
+                                <i class="fa fa-twitter" />
+                            </button>
+                            <button
+                                class="btn-social bg-blue-900 hover:bg-blue-800 text-white w-12 h-12 rounded-lg text-xl leading-12"
+                                aria-label="Sign in with LinkedIn"
+                            >
+                                <i class="fa fa-linkedin" />
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
         </div>
     }
 }
diff --git a/examples/yew/src/components/login_form_three.rs b/examples/yew/src/components/login_form_three.rs
index cc510c4..7c25ecf 100644
--- a/examples/yew/src/components/login_form_three.rs
+++ b/examples/yew/src/components/login_form_three.rs
@@ -1,7 +1,7 @@
 use regex::Regex;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{console, HtmlInputElement, Window};
+use web_sys::{HtmlInputElement, Window, console};
 use yew::prelude::*;
 
 use crate::api::auth::login_user;
diff --git a/examples/yew/src/components/login_form_two.rs b/examples/yew/src/components/login_form_two.rs
index d2edb9e..9ee7eb8 100644
--- a/examples/yew/src/components/login_form_two.rs
+++ b/examples/yew/src/components/login_form_two.rs
@@ -1,7 +1,7 @@
 use regex::Regex;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{console, HtmlInputElement, Window};
+use web_sys::{HtmlInputElement, Window, console};
 use yew::prelude::*;
 
 use crate::api::auth::login_user;
diff --git a/examples/yew/src/components/multi_step_form_one.rs b/examples/yew/src/components/multi_step_form_one.rs
index 7af7e5b..f3d8ddf 100644
--- a/examples/yew/src/components/multi_step_form_one.rs
+++ b/examples/yew/src/components/multi_step_form_one.rs
@@ -380,21 +380,21 @@ pub fn multi_step_form_one() -> Html {
                     validate_function={validate_input}
                 />
                 <Input
-                    r#type={"password"}
-                    label={"Password"}
+                    r#type="password"
+                    label="Password"
                     handle={input_password_handle}
-                    name={"password"}
+                    name="password"
                     r#ref={input_password_ref}
-                    placeholder={"Password"}
-                    error_message={"Password can't be blank!"}
-                    field_class={"relative mt-2 mb-2"}
-                    input_class={"input w-full px-4 py-2 rounded border border-pink-800 bg-gray-100"}
-                    error_class={"text-red-500 absolute text-sm"}
-                    required={true}
+                    placeholder="Password"
+                    error_message="Password can't be blank!"
+                    field_class="relative mt-2 mb-2"
+                    input_class="input w-full px-4 py-2 rounded border border-pink-800 bg-gray-100"
+                    error_class="text-red-500 absolute text-sm"
+                    required=true
                     valid_handle={password_valid_handle}
                     validate_function={validate_input}
-                    eye_active={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"}
-                    eye_disabled={"cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"}
+                    eye_active="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye"
+                    eye_disabled="cursor-pointer absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-gray-600 toggle-button fa fa-eye-slash"
                 />
                 <div class="field btns text-center space-x-5 mt-10">
                     <button
diff --git a/examples/yew/src/tailwind.css b/examples/yew/src/tailwind.css
index a09a48a..910a80a 100644
--- a/examples/yew/src/tailwind.css
+++ b/examples/yew/src/tailwind.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -9,4 +9,4 @@
   max-width: 55px;
   font-size: 14px;
   padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/examples/yew/tailwind.config.js b/examples/yew/tailwind.config.js
index b735cc2..99d7dba 100644
--- a/examples/yew/tailwind.config.js
+++ b/examples/yew/tailwind.config.js
@@ -1,10 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{rs,html}"
-  ],
+  content: ["./index.html", "./src/**/*.{rs,html}"],
   theme: {},
   plugins: [],
-}
-
+};
diff --git a/src/dioxus.rs b/src/dioxus.rs
index 63bad14..5efeb5b 100644
--- a/src/dioxus.rs
+++ b/src/dioxus.rs
@@ -30,6 +30,10 @@ pub struct InputProps {
     #[props(default = "")]
     pub input_class: &'static str,
 
+    /// The inline CSS style to apply directly to the bare `<input>` element.
+    #[props(default = "")]
+    pub input_style: &'static str,
+
     /// The CSS class to be applied to the inner input element and icon.
     #[props(default = "")]
     pub field_class: &'static str,
@@ -208,6 +212,29 @@ pub struct InputProps {
     /// Same as the `width` attribute for `<img>` elements.
     #[props(default = None)]
     pub width: Option<u32>,
+
+    /// When `true`, bypasses wrapper divs and renders only the bare `<input>`.
+    /// Intended for composable slot components such as OTP inputs.
+    #[props(default = false)]
+    pub otp_mode: bool,
+
+    /// Callback fired when the input gains focus. Active only in `otp_mode`.
+    #[props(default)]
+    pub on_focus: Option<EventHandler<FocusEvent>>,
+
+    /// Callback fired when the input loses focus. Active only in `otp_mode`.
+    #[props(default)]
+    pub on_blur: Option<EventHandler<FocusEvent>>,
+
+    /// Raw `oninput` event handler, active only in `otp_mode`.
+    /// When provided, this fires **instead of** the default `handle`-setting `onchange`,
+    /// so the caller has full control over value clearing and slot notification.
+    #[props(default)]
+    pub on_input: Option<EventHandler<Event<FormData>>>,
+
+    /// `inputmode` attribute, hints the virtual keyboard type (e.g. `"numeric"`).
+    #[props(default = "")]
+    pub inputmode: &'static str,
 }
 
 impl PartialEq for InputProps {
@@ -262,6 +289,7 @@ impl PartialEq for InputProps {
             && self.step == other.step
             && self.value == other.value
             && self.width == other.width
+            && self.inputmode == other.inputmode
     }
 }
 
@@ -390,7 +418,7 @@ pub fn Input(mut props: InputProps) -> Element {
     let password_type = if is_eye_active() { "text" } else { "password" };
     let mut country = use_signal(String::default);
 
-    let onchange = {
+    let mut onchange = {
         move |e: Event<FormData>| {
             let value = e.value();
             props.handle.set(value.clone());
@@ -532,6 +560,43 @@ pub fn Input(mut props: InputProps) -> Element {
         },
     };
 
+    if props.otp_mode {
+        let otp_oninput = {
+            let on_input_opt = props.on_input;
+            move |e: Event<FormData>| {
+                if let Some(ref h) = on_input_opt {
+                    h.call(e);
+                } else {
+                    onchange(e);
+                }
+            }
+        };
+        return rsx! {
+            input {
+                r#type: "{props.r#type}",
+                class: "{props.input_class}",
+                style: "{props.input_style}",
+                id: "{props.id}",
+                name: "{props.name}",
+                value: "{props.handle}",
+                placeholder: "{props.placeholder}",
+                aria_label: "{props.aria_label}",
+                aria_required: "{props.aria_required}",
+                aria_invalid: "{props.aria_invalid}",
+                aria_describedby: "{props.aria_describedby}",
+                autocomplete: props.autocomplete,
+                inputmode: props.inputmode,
+                maxlength: props.maxlength.map(|v| v.to_string()).unwrap_or_default(),
+                pattern: "{props.pattern}",
+                disabled: "{props.disabled}",
+                required: props.required,
+                oninput: otp_oninput,
+                onfocus: move |e| { if let Some(h) = &props.on_focus { h.call(e); } },
+                onblur: move |e| { if let Some(h) = &props.on_blur { h.call(e); } },
+            }
+        };
+    }
+
     rsx! {
         div {
             class: "{props.class}",
diff --git a/src/leptos.rs b/src/leptos.rs
index 6668b7b..c9328ac 100644
--- a/src/leptos.rs
+++ b/src/leptos.rs
@@ -151,6 +151,10 @@ pub fn Input(
     #[prop(default = "")]
     input_class: &'static str,
 
+    /// The inline CSS style for the bare `<input>` in otp_mode.
+    #[prop(default = "")]
+    input_style: &'static str,
+
     /// The CSS class to be applied to the inner input element and icon.
     #[prop(default = "")]
     field_class: &'static str,
@@ -329,6 +333,29 @@ pub fn Input(
     /// Same as the `width` attribute for `<img>` elements.
     #[prop(default = None)]
     width: Option<u32>,
+
+    /// When `true`, bypasses wrapper divs and renders only the bare `<input>`.
+    /// Intended for composable slot components such as OTP inputs.
+    #[prop(default = false)]
+    otp_mode: bool,
+
+    /// Callback fired when the input gains focus. Active only when `otp_mode` is `true`.
+    #[prop(optional)]
+    on_focus: Option<Callback<ev::FocusEvent>>,
+
+    /// Callback fired when the input loses focus. Active only when `otp_mode` is `true`.
+    #[prop(optional)]
+    on_blur: Option<Callback<ev::FocusEvent>>,
+
+    /// Raw `oninput` / `on:input` event handler for `otp_mode`.
+    /// When provided, fires **instead of** the default handle-setting `onchange` so the
+    /// caller (OtpSlot) can clear the DOM value.
+    #[prop(optional)]
+    on_input: Option<Callback<web_sys::Event>>,
+
+    /// `inputmode` attribute, hints the virtual keyboard type (e.g. `"numeric"`).
+    #[prop(default = "")]
+    inputmode: &'static str,
 ) -> impl IntoView {
     let (eye_active_handle, set_eye_active_handle) = signal(false);
     let (password_type, set_password_type) = signal("password".to_string());
@@ -492,6 +519,40 @@ pub fn Input(
         }
     };
 
+    if otp_mode {
+        return view! {
+            <input
+                r#type=r#type
+                class=input_class
+                style=input_style
+                id=id
+                name=name
+                value=handle.0.get()
+                placeholder=placeholder
+                aria-label=aria_label
+                aria-required=aria_required
+                aria-invalid=aria_invalid
+                aria-describedby=aria_describedby
+                autocomplete=autocomplete
+                inputmode=inputmode
+                maxlength=maxlength.map(|v| v.to_string())
+                pattern=pattern
+                disabled=disabled
+                required=required
+                on:input=move |e: web_sys::Event| {
+                    if let Some(ref cb) = on_input {
+                        cb.run(e);
+                    } else {
+                        onchange(e);
+                    }
+                }
+                on:focus=move |e| { if let Some(cb) = &on_focus { cb.run(e); } }
+                on:blur=move |e| { if let Some(cb) = &on_blur { cb.run(e); } }
+            />
+        }
+        .into_any();
+    }
+
     view! {
         <div class={class}>
             <label class={label_class} for={id}>{label}</label>
@@ -512,4 +573,5 @@ pub fn Input(
             }
         </div>
     }
+    .into_any()
 }
diff --git a/src/yew.rs b/src/yew.rs
index 6f26c60..dd21826 100644
--- a/src/yew.rs
+++ b/src/yew.rs
@@ -34,6 +34,10 @@ pub struct Props {
     #[prop_or_default]
     pub input_class: &'static str,
 
+    /// The inline CSS style to apply directly to the bare `<input>` element.
+    #[prop_or_default]
+    pub input_style: &'static str,
+
     /// The CSS class to be applied to the inner input element and icon.
     #[prop_or_default]
     pub field_class: &'static str,
@@ -208,6 +212,20 @@ pub struct Props {
     /// Same as the `width` attribute for `<img>` elements.
     #[prop_or_default]
     pub width: Option<u32>,
+
+    /// When `true`, bypasses all wrapper elements (div, label, error) and renders
+    /// only the bare `<input>` element. Intended for use in composable slot-based
+    /// components such as OTP inputs.
+    #[prop_or_default]
+    pub otp_mode: bool,
+
+    /// Callback fired when the input gains focus. Only active when `otp_mode` is `true`.
+    #[prop_or_default]
+    pub on_focus: Callback<FocusEvent>,
+
+    /// Callback fired when the input loses focus. Only active when `otp_mode` is `true`.
+    #[prop_or_default]
+    pub on_blur: Callback<FocusEvent>,
 }
 
 /// A custom input component that handles user input and validation.
@@ -422,7 +440,7 @@ pub fn input(props: &Props) -> Html {
                     aria-required={props.aria_required}
                     aria-invalid={props.aria_invalid}
                     aria-describedby={props.aria_describedby}
-                    oninput={onchange}
+                    oninput={&onchange}
                     required={props.required}
                     autocomplete={props.autocomplete}
                     autocapitalize={props.autocapitalize}
@@ -455,7 +473,7 @@ pub fn input(props: &Props) -> Html {
                 aria-required={props.aria_required}
                 aria-invalid={props.aria_invalid}
                 aria-describedby={props.aria_describedby}
-                oninput={onchange}
+                oninput={&onchange}
                 required={props.required}
                 autocomplete={props.autocomplete}
                 autocapitalize={props.autocapitalize}
@@ -512,7 +530,7 @@ pub fn input(props: &Props) -> Html {
                 aria-required={props.aria_required}
                 aria-invalid={props.aria_invalid}
                 aria-describedby={props.aria_describedby}
-                oninput={onchange}
+                oninput={&onchange}
                 required={props.required}
                 autocomplete={props.autocomplete}
                 autocapitalize={props.autocapitalize}
@@ -530,6 +548,37 @@ pub fn input(props: &Props) -> Html {
         },
     };
 
+    if props.otp_mode {
+        return html! {
+            <input
+                type={r#type}
+                class={props.input_class}
+                style={props.input_style}
+                id={props.id}
+                value={(*props.handle).clone()}
+                name={props.name}
+                ref={props.r#ref.clone()}
+                placeholder={props.placeholder}
+                aria-label={props.aria_label}
+                aria-required={props.aria_required}
+                aria-invalid={props.aria_invalid}
+                aria-describedby={props.aria_describedby}
+                oninput={&onchange}
+                onfocus={props.on_focus.clone()}
+                onblur={props.on_blur.clone()}
+                required={props.required}
+                autocomplete={props.autocomplete}
+                autocapitalize={props.autocapitalize}
+                readonly={props.readonly}
+                minlength={props.minlength.map(|v| v.to_string())}
+                maxlength={props.maxlength.map(|v| v.to_string())}
+                pattern={props.pattern}
+                size={props.size.map(|v| v.to_string())}
+                disabled={props.disabled}
+            />
+        };
+    }
+
     html! {
         <div class={props.class}>
             <label class={props.label_class} for={props.id}>{ props.label }</label>