diff --git a/crates/story/src/input_story.rs b/crates/story/src/input_story.rs
index b7515ee7..c62057fc 100644
--- a/crates/story/src/input_story.rs
+++ b/crates/story/src/input_story.rs
@@ -35,11 +35,12 @@ pub struct InputStory {
     small_input: View<TextInput>,
     otp_input: View<InputOtp>,
     otp_value: Option<SharedString>,
+    opt_input2: View<InputOtp>,
 }
 
 impl InputStory {
     pub fn view(cx: &mut WindowContext) -> View<Self> {
-        cx.new_view(|cx| Self::new(cx))
+        cx.new_view(Self::new)
     }
 
     fn new(cx: &mut ViewContext<Self>) -> Self {
@@ -81,11 +82,13 @@ impl InputStory {
 
         let view = cx.view().clone();
         let otp_input = cx.new_view(|cx| {
-            InputOtp::new(6, cx).on_change(move |value: &SharedString, cx| {
-                view.update(cx, |view, _| {
-                    view.otp_value = Some(value.clone());
+            InputOtp::new(6, cx)
+                .masked(true)
+                .on_change(move |value: &SharedString, cx| {
+                    view.update(cx, |view, _| {
+                        view.otp_value = Some(value.clone());
+                    })
                 })
-            })
         });
 
         Self {
@@ -113,6 +116,7 @@ impl InputStory {
             both_input1,
             otp_input,
             otp_value: None,
+            opt_input2: cx.new_view(|cx| InputOtp::new(6, cx).groups(3)),
         }
     }
 
@@ -180,11 +184,15 @@ impl Render for InputStory {
                     .child(self.small_input.clone()),
             )
             .child(
-                section("Input OTP", cx)
-                    .child(self.otp_input.clone())
-                    .when_some(self.otp_value.clone(), |this, otp| {
-                        this.child(format!("You input OTP: {}", otp))
-                    }),
+                section("Input OTP", cx).child(
+                    v_flex()
+                        .gap_3()
+                        .child(self.otp_input.clone())
+                        .when_some(self.otp_value.clone(), |this, otp| {
+                            this.child(format!("You input OTP: {}", otp))
+                        })
+                        .child(self.opt_input2.clone()),
+                ),
             )
             .child(
                 h_flex()
diff --git a/crates/ui/src/input/input_otp.rs b/crates/ui/src/input/input_otp.rs
index 52c49360..ed3f11ee 100644
--- a/crates/ui/src/input/input_otp.rs
+++ b/crates/ui/src/input/input_otp.rs
@@ -27,7 +27,7 @@ impl InputOtp {
             length,
             number_of_groups: 2,
             value: SharedString::default(),
-            masked: true,
+            masked: false,
             on_change: None,
             blink_cursor: blink_cursor.clone(),
         };
@@ -59,6 +59,12 @@ impl InputOtp {
         self
     }
 
+    /// Set masked to true use masked input.
+    pub fn masked(mut self, masked: bool) -> Self {
+        self.masked = masked;
+        self
+    }
+
     /// Set callback to be called when the value of the OTP Input changes (All OTP input have filled).
     pub fn on_change<F>(mut self, f: F) -> Self
     where