diff --git a/assets/css/app.css b/assets/css/app.css
index 0dbd7dc6c..6ebab5689 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -20,6 +20,45 @@ body {
 }
 
 @layer components {
+  .moon-input-group.horizontal > div:first-child input {
+    @apply ltr:rounded-tr-none ltr:rounded-br-none ltr:input-rsb-hidden ;
+  }
+  .moon-input-group.horizontal > div:first-child input:hover {
+    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
+  }
+  .moon-input-group.horizontal > div:last-child input {
+    @apply ltr:rounded-tl-none ltr:rounded-bl-none ltr:input-lsb-hidden ;
+  }
+  .moon-input-group.horizontal > div:last-child input:hover {
+    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
+  }
+
+  .moon-input-group.horizontal.rtl-aware > div:first-child input {
+    @apply rtl:rounded-tl-none rtl:rounded-bl-none rtl:input-lsb-hidden;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:first-child input:hover {
+    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:last-child input {
+    @apply rtl:rounded-tr-none rtl:rounded-br-none rtl:input-rsb-hidden;
+  }
+  .moon-input-group.horizontal.rtl-aware > div:last-child input:hover {
+    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
+  }
+
+
+  .moon-input-group.vertical > div:first-child input {
+    @apply rounded-bl-none rounded-br-none input-bbb-hidden;
+  }
+  .moon-input-group.vertical > div:first-child input:hover {
+    @apply rounded-moon-i-md;
+  }
+  .moon-input-group.vertical > div:last-child input {
+    @apply rounded-tl-none rounded-tr-none input-tbb-hidden;
+  }
+  .moon-input-group.vertical > div:last-child input:hover {
+    @apply rounded-moon-i-md;
+  }
   .carousel-item {
     scroll-snap-type: x;
     scroll-snap-align: start;
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 24b31aaf0..be0da589a 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -325,7 +325,7 @@ module.exports = {
           "& a, & span": {
             padding: "0.5rem",
           },
-        },
+        }
       });
     }),
   ],
diff --git a/lib/moon/autolayouts/left_to_right.ex b/lib/moon/autolayouts/left_to_right.ex
index b93002392..5227d4c39 100644
--- a/lib/moon/autolayouts/left_to_right.ex
+++ b/lib/moon/autolayouts/left_to_right.ex
@@ -7,10 +7,11 @@ defmodule Moon.Autolayouts.LeftToRight do
   prop class, :string, default: nil
   prop gap, :any, default: "gap-2"
   prop centered, :boolean, default: false
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
 
   def render(assigns) do
     ~F"""
-    <div class={"flex #{@gap} #{@class}", "items-center": @centered}>
+    <div class={"flex #{@gap} #{@class}", "items-center": @centered} {=@dir}>
       <#slot />
     </div>
     """
diff --git a/lib/moon/components/input_group/input_group.ex b/lib/moon/components/input_group/input_group.ex
new file mode 100644
index 000000000..11eb6c997
--- /dev/null
+++ b/lib/moon/components/input_group/input_group.ex
@@ -0,0 +1,22 @@
+defmodule Moon.Components.InputGroup do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  alias Moon.Components.InputGroup.Container
+
+  prop orientation, :string,
+    default: "horizontal",
+    values: ["horizontal", "vertical"]
+
+  prop has_fields, :boolean, default: false
+
+  slot default, required: true, args: [:group_class_fields]
+
+  def render(assigns) do
+    ~F"""
+    <Container orientation={@orientation}>
+      <#slot />
+    </Container>
+    """
+  end
+end
diff --git a/lib/moon/components/input_group/styled/container.ex b/lib/moon/components/input_group/styled/container.ex
new file mode 100644
index 000000000..3c0ad6edc
--- /dev/null
+++ b/lib/moon/components/input_group/styled/container.ex
@@ -0,0 +1,46 @@
+defmodule Moon.Components.InputGroup.Container do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop orientation, :string
+  prop background_color, :string, default: "gohan-100", values: Moon.colors()
+  prop is_error, :boolean
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div class={
+      "moon-input-group border-none shadow-input relative rounded-moon-i-md",
+      @orientation,
+      "rtl-aware",
+      get_class_for_orientation(@orientation, @is_error),
+      "bg-#{@background_color}": @background_color
+    }>
+      <#slot />
+    </div>
+    """
+  end
+
+  defp get_class_for_orientation(orientation, is_error) do
+    cond do
+      orientation == "horizontal" && !is_error ->
+        "
+        flex
+        after:content-[''] after:z-20 after:absolute after:top-0 after:bottom-0 after:w-px
+        after:left-1/2 after:translate-x-[-50%] after:bg-beerus-100 after:x-[3]
+        hover:after:hidden focus-within:after:hidden
+        "
+
+      !is_error ->
+        "
+        after:content-[''] after:z-20 after:absolute after:top-1/2 after:bottom-0 after:w-full after:h-px
+        after:left-0 after:translate-y-[-50%] after:bg-beerus-100 after:x-[3]
+        hover:after:hidden focus-within:after:hidden
+        "
+
+      true ->
+        ""
+    end
+  end
+end
diff --git a/lib/moon/components/text_input/styled/container.ex b/lib/moon/components/text_input/styled/container.ex
index 6588b852a..432a32de6 100644
--- a/lib/moon/components/text_input/styled/container.ex
+++ b/lib/moon/components/text_input/styled/container.ex
@@ -8,6 +8,7 @@ defmodule Moon.Components.TextInput.Container do
   prop id, :string
   prop disabled, :boolean, default: false
   prop size, :string, values: ["md", "lg", "xl"]
+  prop class, :string
 
   slot default
 
@@ -16,13 +17,12 @@ defmodule Moon.Components.TextInput.Container do
     <div
       class={
         "w-full max-w-full relative z-0",
+        @class,
         Utils.get_border_radius(@size),
         "opacity-30 cursor-not-allowed": @disabled
       }
       id={@id}
-    >
-      <#slot />
-    </div>
+    ><#slot /></div>
     """
   end
 end
diff --git a/lib/moon/components/text_input/styled/input.ex b/lib/moon/components/text_input/styled/input.ex
index 50946ced0..b1272294d 100644
--- a/lib/moon/components/text_input/styled/input.ex
+++ b/lib/moon/components/text_input/styled/input.ex
@@ -2,150 +2,78 @@ defmodule Moon.Components.TextInput.Input do
   @moduledoc false
 
   use Moon.StatelessComponent
-
   alias Moon.Components.TextInput.Utils
 
-  prop type, :string,
-    values: [
-      "date",
-      "datetime-local",
-      "email",
-      "number",
-      "password",
-      "search",
-      "tel",
-      "text",
-      "time",
-      "url"
-    ],
-    default: "text"
-
+  prop id, :string
   prop field, :atom
-  prop is_error, :boolean, default: false
-  prop background_color, :string, values: Moon.colors()
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop with_label, :boolean, default: false
-  prop disabled, :boolean
-  prop placeholder, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop is_first, :boolean
-  prop readonly, :boolean
-  prop value, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-
-  prop focus, :event
-  prop keydown, :event
-  prop keyup, :event
-  prop blur, :event
 
   def render(assigns) do
     ~F"""
-    <Surface.Components.Form.TextInput
-      opts={
-        placeholder: @placeholder,
-        disabled: @disabled,
-        required: @required && !@disabled,
-        type: @type,
-        "data-lpignore": "true",
-        step: @step,
-        readonly: @readonly,
-        dir: @dir
-      }
-      value={@value}
-      class={
-        "focus:ring-0 border-0",
-        "block w-full max-w-full py-0 px-4 m-0 appearance-none",
-        "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
-        "shadow-input hover:shadow-input-hov",
-        "focus:shadow-input-focus focus:outline-none",
-        "before:box-border after:box-border",
-        "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
-        "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
-        "input-dt-shared",
-        "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
-        Utils.get_size_styles(@size),
-        get_class_left(
-          @is_sharp_left_side,
-          @is_sharp_top_side,
-          @is_sharp_bottom_side
-        ),
-        get_class_right(
-          @is_sharp_right_side,
-          @is_sharp_top_side,
-          @is_sharp_bottom_side
-        ),
-        get_class_for_date_type(@type, @dir == "rtl"),
-        get_class_for_time_type(@type, @dir == "rtl"),
-        "#{Utils.make_border_left(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_right(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
-        @is_first)}": !@is_error,
-        "input-number-clear": @type == "number",
-        "shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
-        "bg-#{@background_color}": @background_color,
-        "bg-transparent": !@background_color,
-        "input-xl-dt-shared": @size == "xl",
-        "input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
-        "input-lg-dt-shared": @size == "lg"
-      }
-      focus={@focus}
-      keyup={@keyup}
-      keydown={@keydown}
-      blur={@blur}
-      field={@field}
-    />
+    <Context
+      get={Moon.Components.TextInput, placeholder: placeholder}
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, required: required}
+      get={Moon.Components.TextInput, type: type}
+      get={Moon.Components.TextInput, step: step}
+      get={Moon.Components.TextInput, readonly: readonly}
+      get={Moon.Components.TextInput, value: value}
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, background_color: background_color}
+      get={Moon.Components.TextInput, label: label}
+      get={Moon.Components.TextInput, focus: focus}
+      get={Moon.Components.TextInput, keyup: keyup}
+      get={Moon.Components.TextInput, keydown: keydown}
+      get={Moon.Components.TextInput, blur: blur}
+    >
+      <Surface.Components.Form.TextInput
+        {=@id}
+        {=@field}
+        opts={
+          placeholder: placeholder,
+          disabled: disabled,
+          required: required && !disabled,
+          type: type,
+          "data-lpignore": "true",
+          step: step,
+          readonly: readonly
+        }
+        {=value}
+        class={
+          "focus:ring-0 border-0",
+          "block w-full max-w-full py-0 px-4 m-0 appearance-none",
+          "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
+          "shadow-input hover:shadow-input-hov",
+          "focus:shadow-input-focus focus:outline-none",
+          "before:box-border after:box-border",
+          "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
+          "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
+          "input-dt-shared",
+          "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
+          Utils.get_size_styles(size),
+          get_class_for_date_type(type),
+          "ltr:input-t rtl:input-t-rtl": type == "time",
+          "input-number-clear": type == "number",
+          "shadow-input-err hover:shadow-input-err focus:shadow-input-err": is_error,
+          "bg-#{background_color}": background_color,
+          "bg-transparent": !background_color,
+          "input-xl-dt-shared": size == "xl",
+          "input-xl pt-[1.125rem] input-xl-dt-label": size == "xl" && label,
+          "input-lg-dt-shared": size == "lg"
+        }
+        {=focus}
+        {=keyup}
+        {=keydown}
+        {=blur}
+      />
+    </Context>
     """
   end
 
-  defp get_class_for_date_type(type, is_rtl) do
-    cond do
-      type == "date" || type == "datetime-local" -> "input-d"
-      type == "date" && is_rtl -> "input-d-rtl"
-      type == "datetime-local" && is_rtl -> "input-dt-local-rtl"
-      true -> ""
-    end
-  end
-
-  defp get_class_for_time_type(type, is_rtl) do
-    cond do
-      type == "time" -> "input-t"
-      type == "time" && is_rtl -> "input-t-rtl"
-      true -> ""
-    end
-  end
-
-  defp get_class_left(
-         is_sharp_left_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
-    cond do
-      is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
-      is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
-      true -> ""
-    end
-  end
-
-  defp get_class_right(
-         is_sharp_right_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
+  defp get_class_for_date_type(type) do
     cond do
-      is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
-      is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
+      type == "date" -> "ltr:input-d rtl:input-d-rtl"
+      type == "datetime-local" -> "ltr:input-d rtl:input-dt-local-rtl"
       true -> ""
     end
   end
diff --git a/lib/moon/components/text_input/styled/password.ex b/lib/moon/components/text_input/styled/password.ex
index 1ac20c035..bc8739f78 100644
--- a/lib/moon/components/text_input/styled/password.ex
+++ b/lib/moon/components/text_input/styled/password.ex
@@ -2,9 +2,14 @@ defmodule Moon.Components.TextInput.Password do
   @moduledoc false
 
   use Moon.StatelessComponent
-
   alias Moon.Components.TextInput.Utils
 
+  prop id, :string
+  prop field, :atom
+  prop value, :string
+  prop on_keyup, :string
+  prop input_password_id, :string
+
   prop type, :string,
     values: [
       "password",
@@ -12,113 +17,58 @@ defmodule Moon.Components.TextInput.Password do
     ],
     default: "text"
 
-  prop field, :atom
-  prop is_error, :boolean, default: false
-  prop background_color, :string, values: Moon.colors()
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop with_label, :boolean, default: false
-  prop disabled, :boolean
-  prop placeholder, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop is_first, :boolean
-  prop readonly, :boolean
-  prop value, :string
-  prop id, :string
-  prop on_keyup, :string
-  prop input_password_id, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-
-  prop focus, :event
-  prop keydown, :event
-  prop keyup, :event
-  prop blur, :event
-
   def render(assigns) do
     ~F"""
-    <Surface.Components.Form.PasswordInput
-      opts={
-        placeholder: @placeholder,
-        disabled: @disabled,
-        required: @required && !@disabled,
-        "data-lpignore": "true",
-        step: @step,
-        readonly: @readonly,
-        dir: @dir,
-        type: @type
-      }
-      value={@value}
-      class={
-        "focus:ring-0 border-0",
-        "block w-full max-w-full py-0 px-4 m-0 appearance-none",
-        "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
-        "shadow-input hover:shadow-input-hov",
-        "focus:shadow-input-focus focus:outline-none",
-        "before:box-border after:box-border",
-        "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
-        "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
-        "input-dt-shared",
-        "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
-        Utils.get_size_styles(@size),
-        "#{Utils.make_border_left(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_right(@is_side_border_hidden,
-        @is_first,
-        @dir == "rtl")}": !@is_error,
-        "#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
-        @is_first)}": !@is_error,
-        "#{get_class_left(@is_sharp_left_side,
-        @is_sharp_top_side,
-        @is_sharp_bottom_side)}": !@is_error,
-        "#{get_class_right(@is_sharp_right_side,
-        @is_sharp_top_side,
-        @is_sharp_bottom_side)}": !@is_error,
-        "shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
-        "bg-#{@background_color}": @background_color,
-        "bg-transparent": !@background_color,
-        "input-xl-dt-shared": @size == "xl",
-        "input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
-        "input-lg-dt-shared": @size == "lg"
-      }
-      id={"#{@id}_input"}
-      keyup={@on_keyup, target: "##{@input_password_id}"}
-      focus={@focus}
-      keydown={@keydown}
-      blur={@blur}
-      field={@field}
-    />
+    <Context
+      get={Moon.Components.TextInput, placeholder: placeholder}
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, required: required}
+      get={Moon.Components.TextInput, readonly: readonly}
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, background_color: background_color}
+      get={Moon.Components.TextInput, focus: focus}
+      get={Moon.Components.TextInput, keydown: keydown}
+      get={Moon.Components.TextInput, blur: blur}
+      get={Moon.Components.TextInput, label: label}
+    >
+      <Surface.Components.Form.PasswordInput
+        opts={
+          placeholder: placeholder,
+          disabled: disabled,
+          required: required && !disabled,
+          "data-lpignore": "true",
+          readonly: readonly,
+          type: @type
+        }
+        value={@value}
+        class={
+          "focus:ring-0 border-0",
+          "block w-full max-w-full py-0 px-4 m-0 appearance-none",
+          "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
+          "shadow-input hover:shadow-input-hov",
+          "focus:shadow-input-focus focus:outline-none",
+          "before:box-border after:box-border",
+          "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
+          "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
+          "input-dt-shared",
+          "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
+          Utils.get_size_styles(size),
+          "shadow-input-err hover:shadow-input-err focus:shadow-input-err": is_error,
+          "bg-#{background_color}": background_color,
+          "bg-transparent": !background_color,
+          "input-xl-dt-shared": size == "xl",
+          "input-xl pt-[1.125rem] input-xl-dt-label": size == "xl" && label,
+          "input-lg-dt-shared": size == "lg"
+        }
+        id={"#{@id}_input"}
+        keyup={@on_keyup, target: "##{@input_password_id}"}
+        {=@field}
+        {=focus}
+        {=keydown}
+        {=blur}
+      />
+    </Context>
     """
   end
-
-  defp get_class_left(
-         is_sharp_left_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
-    cond do
-      is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
-      is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
-      true -> ""
-    end
-  end
-
-  defp get_class_right(
-         is_sharp_right_side,
-         is_sharp_top_side,
-         is_sharp_bottom_side
-       ) do
-    cond do
-      is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
-      is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
-      true -> ""
-    end
-  end
 end
diff --git a/lib/moon/components/text_input/styled/show_password.ex b/lib/moon/components/text_input/styled/show_password.ex
index 60138736c..7c405dc55 100644
--- a/lib/moon/components/text_input/styled/show_password.ex
+++ b/lib/moon/components/text_input/styled/show_password.ex
@@ -6,10 +6,9 @@ defmodule Moon.Components.TextInput.ShowPassword do
   prop input_password_id, :string
   prop toggle, :string, default: "toggle_password_visibility"
 
-  prop is_rtl, :boolean, default: false
-
   slot default
 
+  # TODO
   def render(assigns) do
     ~F"""
     <div
@@ -17,19 +16,15 @@ defmodule Moon.Components.TextInput.ShowPassword do
       :on-click={@toggle, target: "##{@input_password_id}"}
       class={
         "text-moon-14 text-bulma absolute top-2/4 mt-[-0.75rem] z-[3] underline cursor-pointer",
-        get_direction_style(@is_rtl)
+        # buggy on beta TW, rtl: and ltr: (Show password when using <TopToDown> is broken)
+        "rtl:left-[0.938rem]",
+        # buggy on beta TW, rtl: and ltr: (Show password when using <TopToDown> is broken)
+        "ltr:right-[0.938rem]",
+        "right-[0.938rem]"
       }
     >
       <#slot />
     </div>
     """
   end
-
-  defp get_direction_style(is_rtl) do
-    if is_rtl do
-      "left-[0.938rem]"
-    else
-      "right-[0.938rem]"
-    end
-  end
 end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_basic.ex b/lib/moon/components/text_input/subcomponents/text_input_basic.ex
index f3b4055f9..af8adacfa 100644
--- a/lib/moon/components/text_input/subcomponents/text_input_basic.ex
+++ b/lib/moon/components/text_input/subcomponents/text_input_basic.ex
@@ -4,95 +4,36 @@ defmodule Moon.Components.TextInput.TextInputBasic do
   use Moon.StatelessComponent
   alias Moon.Components.TextInput.Container
   alias Moon.Components.TextInput.Input
-  alias Moon.Components.TextInput.HintText
   alias Moon.Components.ErrorTag
 
-  prop type, :string,
-    values: [
-      "date",
-      "datetime-local",
-      "email",
-      "number",
-      "password",
-      "search",
-      "tel",
-      "text",
-      "time",
-      "url"
-    ],
-    default: "text"
-
   prop id, :string
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop placeholder, :string
-  prop is_error, :boolean
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
-  prop is_first, :boolean
-  prop disabled, :boolean
-  prop label, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop readonly, :boolean
-  prop value, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-
-  prop focus, :event
-  prop keydown, :event
-  prop keyup, :event
-  prop blur, :event
-
-  prop use_error_tag, :boolean
-
-  slot hint_text_slot
+  prop field, :atom
+  prop class, :string, default: ""
+  slot default
 
   def render(assigns) do
     ~F"""
-    <Container disabled={@disabled} size={@size}>
-      <label
-        dir={@dir}
-        :if={@label}
-        class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": @disabled}
-      >
-        {@label}
-      </label>
-      <Input
-        is_error={@is_error}
-        size={@size}
-        type={@type}
-        dir={@dir}
-        with_label={@label}
-        placeholder={@placeholder}
-        required={@required}
-        readonly={@readonly}
-        value={@value}
-        step={@step}
-        background_color={@background_color}
-        is_sharp_left_side={@is_sharp_left_side}
-        is_sharp_right_side={@is_sharp_right_side}
-        is_sharp_top_side={@is_sharp_top_side}
-        is_sharp_bottom_side={@is_sharp_bottom_side}
-        is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
-        is_side_border_hidden={@is_side_border_hidden}
-        is_first={@is_first}
-        focus={@focus}
-        keyup={@keyup}
-        keydown={@keydown}
-        blur={@blur}
-      />
-      <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
-        <#slot name="hint_text_slot" />
-      </HintText>
-      <div class="inline-block mt-2 text-moon-12">
-        <ErrorTag :if={@use_error_tag && @is_error} />
-      </div>
-    </Container>
+    <Context
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, label: label}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, use_error_tag: use_error_tag}
+    >
+      <Container {=disabled} {=size} {=@class}>
+        <label
+          :if={label}
+          class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": disabled}
+        >
+          {label}
+        </label>
+        <Input {=@id} {=@field} />
+        <#slot />
+        <div class="inline-block mt-2 text-moon-12" :if={use_error_tag && is_error}>
+          <ErrorTag />
+        </div>
+      </Container>
+    </Context>
     """
   end
 end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex b/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex
index 35e5ae207..50c73051d 100644
--- a/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex
+++ b/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex
@@ -4,107 +4,50 @@ defmodule Moon.Components.TextInput.TextInputInnerLabel do
   use Moon.StatelessComponent
   alias Moon.Components.TextInput.Container
   alias Moon.Components.TextInput.Input
-  alias Moon.Components.TextInput.HintText
   alias Moon.Components.TextInput.Utils
   alias Moon.Components.ErrorTag
 
-  prop type, :string,
-    values: [
-      "date",
-      "datetime-local",
-      "email",
-      "number",
-      "password",
-      "search",
-      "tel",
-      "text",
-      "time",
-      "url"
-    ],
-    default: "text"
-
+  prop class, :string, default: ""
   prop id, :string
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop placeholder, :string
-  prop is_error, :boolean
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
-  prop is_first, :boolean
-  prop disabled, :boolean
-  prop label, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop readonly, :boolean
-  prop value, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-
-  prop focus, :event
-  prop keydown, :event
-  prop keyup, :event
-  prop blur, :event
-
-  prop use_error_tag, :boolean
-
-  slot hint_text_slot
+  prop field, :atom
+  slot default
 
   def render(assigns) do
     ~F"""
-    <Container disabled={@disabled} size={@size}>
-      <div class={
-        "w-full max-w-full relative",
-        Utils.get_border_radius(@size),
-        "bg-transparent": !@background_color,
-        "bg-#{@background_color}": @background_color
-      }>
-        <Input
-          is_error={@is_error}
-          size={@size}
-          type={@type}
-          dir={@dir}
-          with_label={@label}
-          placeholder={@placeholder}
-          required={@required}
-          step={@step}
-          readonly={@readonly}
-          value={@value}
-          is_sharp_left_side={@is_sharp_left_side}
-          is_sharp_right_side={@is_sharp_right_side}
-          is_sharp_top_side={@is_sharp_top_side}
-          is_sharp_bottom_side={@is_sharp_bottom_side}
-          is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
-          is_side_border_hidden={@is_side_border_hidden}
-          is_first={@is_first}
-          focus={@focus}
-          keyup={@keyup}
-          keydown={@keydown}
-          blur={@blur}
-        />
-        <label
-          dir={@dir}
-          :if={@label}
-          class={
-            "absolute text-[0.75rem] leading-3 text-trunks-100 top-3 z-[1] transition-all ease-in-out duration-200",
-            "opacity-30 cursor-not-allowed": @disabled,
-            "right-4": @dir == "rtl",
-            "left-4": @dir != "rtl"
-          }
-        >
-          {@label}
-        </label>
-      </div>
-      <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
-        <#slot name="hint_text_slot" />
-      </HintText>
-      <div class="inline-block mt-2 text-moon-12">
-        <ErrorTag :if={@use_error_tag && @is_error} />
-      </div>
-    </Container>
+    <Context
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, background_color: background_color}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, label: label}
+      get={Moon.Components.TextInput, use_error_tag: use_error_tag}
+    >
+      <Container disabled={disabled} size={size} {=@class}>
+        <div class={
+          "w-full max-w-full relative",
+          Utils.get_border_radius(size),
+          "bg-transparent": !background_color,
+          "bg-#{background_color}": background_color
+        }>
+          <Input {=@id} {=@field} />
+          <label
+            :if={label}
+            class={
+              "absolute text-[0.75rem] leading-3 text-trunks-100 top-3 z-[1] transition-all ease-in-out duration-200",
+              "rtl:right-4",
+              "ltr:left-4",
+              "opacity-30 cursor-not-allowed": disabled
+            }
+          >
+            {label}
+          </label>
+        </div>
+        <#slot />
+        <div class="inline-block mt-2 text-moon-12" :if={use_error_tag && is_error}>
+          <ErrorTag />
+        </div>
+      </Container>
+    </Context>
     """
   end
 end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_password.ex b/lib/moon/components/text_input/subcomponents/text_input_password.ex
index b0c0c757e..398df3fa8 100644
--- a/lib/moon/components/text_input/subcomponents/text_input_password.ex
+++ b/lib/moon/components/text_input/subcomponents/text_input_password.ex
@@ -4,138 +4,101 @@ defmodule Moon.Components.TextInput.TextInputPassword do
   use Moon.StatefulComponent
   alias Moon.Components.TextInput.Container
   alias Moon.Components.TextInput.Password
-  alias Moon.Components.TextInput.HintText
   alias Moon.Components.TextInput.Utils
   alias Moon.Components.TextInput.ShowPassword
   alias Moon.Components.ErrorTag
 
-  prop size, :string, values: ["md", "lg", "xl"]
-  prop placeholder, :string
-  prop is_error, :boolean
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
-  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
-  prop is_first, :boolean
-  prop disabled, :boolean
-  prop label, :string
-  prop required, :boolean
-  prop step, :string, default: "1"
-  prop readonly, :boolean
-  prop value, :string
-
-  prop is_sharp_left_side, :boolean
-  prop is_sharp_right_side, :boolean
-  prop is_sharp_top_side, :boolean
-  prop is_sharp_bottom_side, :boolean
-  prop is_top_bottom_border_hidden, :boolean
-  prop is_side_border_hidden, :boolean
-  prop show_password_text, :string, default: "Show"
-
-  prop focus, :event
-  prop keydown, :event
-  prop blur, :event
-
-  prop use_error_tag, :boolean
-
   data password_shown, :boolean, default: false
   data password, :string, default: ""
 
-  slot hint_text_slot
+  prop field, :atom
+  prop class, :string, default: ""
+  slot default
 
   def render(assigns) do
     ~F"""
-    <Container disabled={@disabled} id={@id}>
-      {#if @size == "xl"}
-        <div
-          id={"#{@id}_text_input_password"}
-          class={
-            "w-full max-w-full relative",
-            Utils.get_border_radius(@size),
-            "bg-#{@background_color}": @background_color
-          }
-        >
-          <Password
-            size={@size}
-            is_error={@is_error}
-            background_color={@background_color}
-            value={@password}
-            on_keyup="on_keyup"
-            input_password_id={"#{@id}_text_input_password"}
-            id={@id}
-            with_label={@label}
-            type={get_type(@password_shown)}
-            focus={@focus}
-            keydown={@keydown}
-            blur={@blur}
-            placeholder={@placeholder}
-          />
-          <label class={
-            "absolute text-[0.75rem] leading-3 text-trunks-199 top-3 z-[3] transition-all",
-            "right-4": @dir == "rtl",
-            "left-4": @dir == "ltr"
-          }>
-            {@label}
+    <Context
+      get={Moon.Components.TextInput, disabled: disabled}
+      get={Moon.Components.TextInput, size: size}
+      get={Moon.Components.TextInput, background_color: background_color}
+      get={Moon.Components.TextInput, label: label}
+      get={Moon.Components.TextInput, is_error: is_error}
+      get={Moon.Components.TextInput, use_error_tag: use_error_tag}
+      get={Moon.Components.TextInput, show_password_text: show_password_text}
+    >
+      <Container {=disabled} {=@id} {=@class}>
+        {#if size == "xl"}
+          <div
+            id={"#{@id}_text_input_password"}
+            class={
+              "w-full max-w-full relative",
+              Utils.get_border_radius(size),
+              "bg-#{background_color}": background_color
+            }
+          >
+            <Password
+              {=@id}
+              {=@field}
+              value={@password}
+              on_keyup="on_keyup"
+              input_password_id={"#{@id}_text_input_password"}
+              type={get_type(@password_shown)}
+            />
+            <label class={
+              "absolute text-[0.75rem] leading-3 text-trunks-199 top-3 z-[3] transition-all",
+              "rtl:right-4",
+              "ltr:left-4"
+            }>
+              {label}
+            </label>
+            <ShowPassword
+              toggle="toggle_password_visibility"
+              input_password_id={"#{@id}_text_input_password"}
+            >
+              {show_password_text}
+            </ShowPassword>
+          </div>
+          <#slot />
+          <div class="inline-block mt-2 text-moon-12" :if={use_error_tag && is_error}>
+            <ErrorTag />
+          </div>
+        {#else}
+          <label
+            :if={label}
+            class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": disabled}
+          >
+            {label}
           </label>
-          <ShowPassword
-            toggle="toggle_password_visibility"
-            is_rtl={is_rtl(@dir)}
-            input_password_id={"#{@id}_text_input_password"}
+          <div
+            id={"#{@id}_text_input_password"}
+            class={
+              "w-full max-w-full relative",
+              Utils.get_border_radius(size)
+            }
           >
-            {@show_password_text}
-          </ShowPassword>
-        </div>
-        <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
-          <#slot name="hint_text_slot" />
-        </HintText>
-        <div class="inline-block mt-2 text-moon-12">
-          <ErrorTag :if={@use_error_tag && @is_error} />
-        </div>
-      {#else}
-        <label
-          dir={@dir}
-          :if={@label}
-          class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": @disabled}
-        >
-          {@label}
-        </label>
-        <div
-          id={"#{@id}_text_input_password"}
-          class={
-            "w-full max-w-full relative",
-            Utils.get_border_radius(@size)
-          }
-        >
-          <Password
-            size={@size}
-            is_error={@is_error}
-            background_color={@background_color}
-            value={@password}
-            on_keyup="on_keyup"
-            input_password_id={"#{@id}_text_input_password"}
-            id={@id}
-            type={get_type(@password_shown)}
-            focus={@focus}
-            blur={@blur}
-            placeholder={@placeholder}
-          />
+            <Password
+              {=@id}
+              {=@field}
+              value={@password}
+              on_keyup="on_keyup"
+              input_password_id={"#{@id}_text_input_password"}
+              type={get_type(@password_shown)}
+            />
 
-          <ShowPassword
-            toggle="toggle_password_visibility"
-            is_rtl={is_rtl(@dir)}
-            input_password_id={"#{@id}_text_input_password"}
-          >
-            {@show_password_text}
-          </ShowPassword>
-        </div>
-        <div>
-        </div>
-        <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
-          <#slot name="hint_text_slot" />
-        </HintText>
-        <div class="inline-block mt-2 text-moon-12">
-          <ErrorTag :if={@use_error_tag && @is_error} />
-        </div>
-      {/if}
-    </Container>
+            <ShowPassword
+              toggle="toggle_password_visibility"
+              input_password_id={"#{@id}_text_input_password"}
+            >
+              {show_password_text}
+            </ShowPassword>
+          </div>
+          <#slot />
+          <div class="inline-block mt-2 text-moon-12" :if={use_error_tag && is_error}>
+            <ErrorTag />
+          </div>
+        {/if}
+      </Container>
+    </Context>
     """
   end
 
@@ -154,8 +117,4 @@ defmodule Moon.Components.TextInput.TextInputPassword do
       "password"
     end
   end
-
-  defp is_rtl(dir) do
-    dir == "rtl"
-  end
 end
diff --git a/lib/moon/components/text_input/text_input.ex b/lib/moon/components/text_input/text_input.ex
index 89aaec891..ac668c89b 100644
--- a/lib/moon/components/text_input/text_input.ex
+++ b/lib/moon/components/text_input/text_input.ex
@@ -6,9 +6,11 @@ defmodule Moon.Components.TextInput do
   alias Moon.Components.TextInput.TextInputInnerLabel
   alias Moon.Components.TextInput.TextInputPassword
   alias Surface.Components.Form.Input.InputContext
+  alias Moon.Components.TextInput.HintText
 
   prop id, :string
-  prop size, :string, values: ["md", "lg", "xl"]
+  prop field, :atom
+  prop size, :string, values: ["md", "lg", "xl"], default: "md"
 
   prop type, :string,
     values: [
@@ -27,7 +29,6 @@ defmodule Moon.Components.TextInput do
 
   prop placeholder, :string
   prop is_error, :boolean
-  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
   prop background_color, :string, values: Moon.colors(), default: "gohan-100"
   prop is_first, :boolean
   prop disabled, :boolean
@@ -41,6 +42,7 @@ defmodule Moon.Components.TextInput do
   prop is_sharp_bottom_side, :boolean
   prop is_top_bottom_border_hidden, :boolean
   prop is_side_border_hidden, :boolean
+
   prop readonly, :boolean
   prop value, :string
 
@@ -49,100 +51,85 @@ defmodule Moon.Components.TextInput do
   prop keyup, :event
   prop blur, :event
 
+  prop show_password_text, :string, default: "Show"
+
   prop use_error_tag, :boolean
 
   slot hint_text_slot
-  slot show_password_text
+
+  prop class, :string, default: ""
 
   def render(assigns) do
     ~F"""
     <InputContext assigns={assigns} :let={form: form, field: field}>
-      {#if @type == "password"}
-        <TextInputPassword
-          id={@id}
-          disabled={@disabled}
-          dir={@dir}
-          label={@label}
-          is_error={has_error(@is_error, form, field)}
-          size={@size}
-          step={@step}
-          required={@required}
-          placeholder={@placeholder}
-          readonly={@readonly}
-          value={@value}
-          background_color={@background_color}
-          is_sharp_left_side={@is_sharp_left_side}
-          is_sharp_right_side={@is_sharp_right_side}
-          is_sharp_top_side={@is_sharp_top_side}
-          is_sharp_bottom_side={@is_sharp_bottom_side}
-          is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
-          is_side_border_hidden={@is_side_border_hidden}
-          is_first={@is_first}
-          use_error_tag={@use_error_tag}
-        >
-          <:hint_text_slot>
-            <#slot name="hint_text_slot" />
-          </:hint_text_slot>
-        </TextInputPassword>
-      {#elseif @size == "xl"}
-        <TextInputInnerLabel
-          disabled={@disabled}
-          dir={@dir}
-          label={@label}
-          is_error={has_error(@is_error, form, field)}
-          size={@size}
-          type={@type}
-          step={@step}
-          required={@required}
-          placeholder={@placeholder}
-          readonly={@readonly}
-          value={@value}
-          background_color={@background_color}
-          is_sharp_left_side={@is_sharp_left_side}
-          is_sharp_right_side={@is_sharp_right_side}
-          is_sharp_top_side={@is_sharp_top_side}
-          is_sharp_bottom_side={@is_sharp_bottom_side}
-          is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
-          is_side_border_hidden={@is_side_border_hidden}
-          is_first={@is_first}
-          use_error_tag={@use_error_tag}
-        >
-          <:hint_text_slot>
-            <#slot name="hint_text_slot" />
-          </:hint_text_slot>
-        </TextInputInnerLabel>
-      {#else}
-        <TextInputBasic
-          disabled={@disabled}
-          dir={@dir}
-          label={@label}
-          is_error={has_error(@is_error, form, field)}
-          size={@size}
-          type={@type}
-          step={@step}
-          readonly={@readonly}
-          value={@value}
-          required={@required}
-          placeholder={@placeholder}
-          background_color={@background_color}
-          is_sharp_left_side={@is_sharp_left_side}
-          is_sharp_right_side={@is_sharp_right_side}
-          is_sharp_top_side={@is_sharp_top_side}
-          is_sharp_bottom_side={@is_sharp_bottom_side}
-          is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
-          is_side_border_hidden={@is_side_border_hidden}
-          is_first={@is_first}
-          use_error_tag={@use_error_tag}
-        >
-          <:hint_text_slot>
-            <#slot name="hint_text_slot" />
-          </:hint_text_slot>
-        </TextInputBasic>
-      {/if}
+      <Context
+        put={__MODULE__, size: @size}
+        put={__MODULE__, type: @type}
+        put={__MODULE__, placeholder: @placeholder}
+        put={__MODULE__, is_error: has_error(@is_error, form, field)}
+        put={__MODULE__, background_color: @background_color}
+        put={__MODULE__, is_first: @is_first}
+        put={__MODULE__, disabled: @disabled}
+        put={__MODULE__, label: @label}
+        put={__MODULE__, required: @required}
+        put={__MODULE__, step: @step}
+        put={__MODULE__, is_sharp_left_side: @is_sharp_left_side}
+        put={__MODULE__, is_sharp_right_side: @is_sharp_right_side}
+        put={__MODULE__, is_sharp_bottom_side: @is_sharp_bottom_side}
+        put={__MODULE__, is_sharp_top_side: @is_sharp_top_side}
+        put={__MODULE__, is_top_bottom_border_hidden: @is_top_bottom_border_hidden}
+        put={__MODULE__, is_side_border_hidden: @is_side_border_hidden}
+        put={__MODULE__, readonly: @readonly}
+        put={__MODULE__, value: @value}
+        put={__MODULE__, focus: @focus}
+        put={__MODULE__, keydown: @keydown}
+        put={__MODULE__, keyup: @keyup}
+        put={__MODULE__, blur: @blur}
+        put={__MODULE__, show_password_text: @show_password_text}
+        put={__MODULE__, use_error_tag: @use_error_tag}
+        get={Moon.Components.InputGroup, is_in_input_group: is_in_input_group}
+        get={Moon.Components.InputGroup, group_class_plain: group_class_plain}
+      >
+        {#if @type == "password"}
+          <TextInputPassword
+            {=@id}
+            {=@field}
+            class={get_combined_class(is_in_input_group, @class, field, group_class_plain)}
+          >
+            <HintText :if={slot_assigned?(:hint_text_slot)} {=@is_error}>
+              <#slot name="hint_text_slot" />
+            </HintText>
+          </TextInputPassword>
+        {#elseif @size == "xl"}
+          <TextInputInnerLabel
+            {=@id}
+            {=@field}
+            class={get_combined_class(is_in_input_group, @class, field, group_class_plain)}
+          >
+            <HintText :if={slot_assigned?(:hint_text_slot)} {=@is_error}>
+              <#slot name="hint_text_slot" />
+            </HintText>
+          </TextInputInnerLabel>
+        {#else}
+          <TextInputBasic {=@id} {=@field} {=@class}>
+            <HintText :if={slot_assigned?(:hint_text_slot)} {=@is_error}>
+              <#slot name="hint_text_slot" />
+            </HintText>
+          </TextInputBasic>
+        {/if}
+      </Context>
     </InputContext>
     """
   end
 
+  defp get_combined_class(is_in_input_group, class, field, group_class_plain) do
+    if is_in_input_group && !field do
+      group_class_plain <> " " <> class
+    else
+      class
+    end
+  end
+
   defp has_error(is_error, form, field) do
     is_error || (field && form && Keyword.has_key?(form.errors, field))
   end
diff --git a/lib/moon/components/text_input/utils/utils.ex b/lib/moon/components/text_input/utils/utils.ex
index 28fc3d86e..d77220fcd 100644
--- a/lib/moon/components/text_input/utils/utils.ex
+++ b/lib/moon/components/text_input/utils/utils.ex
@@ -21,39 +21,4 @@ defmodule Moon.Components.TextInput.Utils do
         "h-10 leading-10 rounded-moon-i-sm hover:rounded-moon-i-sm focus:rounded-moon-i-sm invalid:rounded-moon-i-sm"
     end
   end
-
-  def make_border_left(
-        is_side_border_hidden,
-        is_first,
-        is_rtl
-      ) do
-    cond do
-      is_side_border_hidden && is_rtl && is_first -> "input-lsb-hidden"
-      is_side_border_hidden -> "input-lsb-hidden"
-      true -> ""
-    end
-  end
-
-  def make_border_right(
-        is_side_border_hidden,
-        is_first,
-        is_rtl
-      ) do
-    cond do
-      is_side_border_hidden && is_rtl -> "input-rsb-hidden"
-      is_side_border_hidden && is_first -> "input-rsb-hidden"
-      true -> ""
-    end
-  end
-
-  def make_border_top_bottom(
-        is_top_bottom_border_hidden,
-        is_first
-      ) do
-    cond do
-      is_top_bottom_border_hidden && is_first -> "input-bbb-hidden"
-      is_top_bottom_border_hidden -> "input-tbb-hidden"
-      true -> ""
-    end
-  end
 end
diff --git a/lib/moon_web/components/example_and_code.ex b/lib/moon_web/components/example_and_code.ex
index a5c693c93..3db646a4c 100644
--- a/lib/moon_web/components/example_and_code.ex
+++ b/lib/moon_web/components/example_and_code.ex
@@ -47,10 +47,10 @@ defmodule MoonWeb.Components.ExampleAndCode do
         </div>
       </Context>
       <div
-        class="p-4 flex flex-col bg-goku-100 text-moon-14 rounded-moon-s-sm"
+        class="grid gap-4 p-4 bg-goku-100 text-moon-14 rounded-moon-s-sm"
         :if={slot_assigned?(:state)}
       >
-        <div><Label size="medium" class="bg-piccolo-100 mb-3">State</Label></div>
+        <div><Label size="medium" class="bg-piccolo-100">State</Label></div>
         <pre class="break-all overflow-x-scroll text-trunks-100"><#slot name="state" /></pre>
       </div>
     </section>
diff --git a/lib/moon_web/components/left_menu.ex b/lib/moon_web/components/left_menu.ex
index 60c8ee18e..1c62203cc 100644
--- a/lib/moon_web/components/left_menu.ex
+++ b/lib/moon_web/components/left_menu.ex
@@ -154,7 +154,7 @@ defmodule MoonWeb.Components.LeftMenu do
                         <SidebarLink route={Pages.Components.TabsPage}>Tabs</SidebarLink>
                         <SidebarLink :if={!@hide_items} route={Pages.Components.TablePage}>Table</SidebarLink>
                         <SidebarLink route={Pages.Components.TextInputPage}>Text input</SidebarLink>
-                        <SidebarLink :if={!@hide_items} route={Pages.Components.TextInputGroupPage}>Text input group</SidebarLink>
+                        <SidebarLink route={Pages.Components.InputGroupPage}>Input group</SidebarLink>
                         <SidebarLink route={Pages.Components.ToastPage}>Toast</SidebarLink>
                         <SidebarLink route={Pages.Components.TooltipPage}>Tooltip</SidebarLink>
                         <Accordion
diff --git a/lib/moon_web/pages/components/input_group_page.ex b/lib/moon_web/pages/components/input_group_page.ex
new file mode 100644
index 000000000..b2bdf0b75
--- /dev/null
+++ b/lib/moon_web/pages/components/input_group_page.ex
@@ -0,0 +1,235 @@
+defmodule MoonWeb.Pages.Components.InputGroupPage do
+  @moduledoc false
+
+  use MoonWeb, :live_view
+
+  alias Moon.Autolayouts.TopToDown
+  alias MoonWeb.Components.ExampleAndCode
+  alias MoonWeb.Components.Page
+  alias Moon.Components.Heading
+  alias Moon.Autolayouts.LeftToRight
+  alias Moon.Components.InputGroup
+  alias Moon.Components.TextInput
+  alias MoonWeb.Components.ComponentPageDescription
+  alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
+  alias Moon.Components.Form
+  alias MoonWeb.Components.PropsTable
+  alias Moon.Autolayouts.TopToDown
+
+  data breadcrumbs, :any,
+    default: [
+      %{
+        to: "#",
+        name: "Components"
+      },
+      %{
+        to: "/components/input-group",
+        name: "Input Group"
+      }
+    ]
+
+  data props_info_array, :list,
+    default: [
+      %{
+        :name => 'orientation',
+        :type => 'vertical | horizontal',
+        :required => 'false',
+        :default => 'horizontal',
+        :description => ''
+      },
+      %{
+        :name => 'slot',
+        :type => 'slot',
+        :required => 'true',
+        :default => '-',
+        :description => 'Default slot'
+      }
+    ]
+
+  def mount(params, _session, socket) do
+    user = %User{}
+    user_changeset = User.changeset(user, %{})
+
+    {:ok,
+     assign(socket,
+       theme_name: params["theme_name"] || "moon-design-light",
+       active_page: __MODULE__,
+       user: user,
+       user_changeset: user_changeset
+     )}
+  end
+
+  def handle_params(_params, uri, socket) do
+    {:noreply, assign(socket, uri: uri)}
+  end
+
+  def handle_event("register_form_update", params, socket) do
+    user_changeset = User.changeset(socket.assigns.user, params["user"])
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def handle_event("register_form_submit", params, socket) do
+    user_changeset =
+      User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def input_group_1000_state(assigns) do
+    ~F"""
+    {inspect(@user_changeset.changes, pretty: true)}
+    """
+  end
+
+  def render(assigns) do
+    ~F"""
+    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
+      <TopToDown>
+        <Heading size={56} class="mb-4">Input Group</Heading>
+        <ComponentPageDescription>
+          <p>
+            !!! Input Group is supported only in size `xlarge`.
+          </p>
+        </ComponentPageDescription>
+
+        <Context put={theme_class: @theme_name}>
+          <ExampleAndCode id="group_1" title="Default">
+            <:example>
+              <LeftToRight class="items-center justify-around w-full items-end">
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup>
+                    <TextInput field={:country} size="xl" placeholder="Country" />
+                    <TextInput field={:phone} size="xl" placeholder="Phone" />
+                  </InputGroup>
+                </Form>
+
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup orientation="vertical">
+                    <TextInput field={:country} size="xl" placeholder="Country" />
+                    <TextInput field={:phone} size="xl" placeholder="Phone" />
+                  </InputGroup>
+                </Form>
+              </LeftToRight>
+            </:example>
+
+            <:code>{input_group_1_code()}</:code>
+
+            <:state>{input_group_1000_state(assigns)}</:state>
+          </ExampleAndCode>
+
+          <ExampleAndCode id="group_10" title="RTL">
+            <:example>
+              <LeftToRight class="items-center justify-around w-full items-end" dir="rtl">
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup>
+                    <TextInput field={:country} size="xl" placeholder="Country" />
+                    <TextInput field={:phone} size="xl" placeholder="Phone" />
+                  </InputGroup>
+                </Form>
+
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup orientation="vertical">
+                    <TextInput field={:country} size="xl" placeholder="Country" />
+                    <TextInput field={:phone} size="xl" placeholder="Phone" />
+                  </InputGroup>
+                </Form>
+              </LeftToRight>
+            </:example>
+
+            <:code>{input_group_10_code()}</:code>
+
+            <:state>{input_group_1000_state(assigns)}</:state>
+          </ExampleAndCode>
+
+          <ExampleAndCode id="group_100" title="Text type variants">
+            <:example>
+              <LeftToRight class="items-center justify-around w-full items-end">
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup>
+                    <TextInput field={:email} size="xl" placeholder="Email" type="email" />
+                    <TextInput field={:password} size="xl" placeholder="Password" type="password" id="password1" />
+                  </InputGroup>
+                </Form>
+
+                <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+                  <InputGroup orientation="vertical">
+                    <TextInput field={:email} size="xl" placeholder="Email" type="email" />
+                    <TextInput field={:password} size="xl" placeholder="Password" type="password" id="password2" />
+                  </InputGroup>
+                </Form>
+              </LeftToRight>
+            </:example>
+
+            <:code>{input_group_100_code()}</:code>
+
+            <:state>{input_group_1000_state(assigns)}</:state>
+          </ExampleAndCode>
+        </Context>
+
+        <PropsTable data={@props_info_array} />
+      </TopToDown>
+    </Page>
+    """
+  end
+
+  defp input_group_1_code() do
+    """
+    <LeftToRight class="items-center justify-around w-full items-end">
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup>
+          <TextInput field={:country} size="xl" placeholder="Country" />
+          <TextInput field={:phone} size="xl" placeholder="Phone" />
+        </InputGroup>
+      </Form>
+
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup orientation="vertical">
+          <TextInput field={:country} size="xl" placeholder="Country" />
+          <TextInput field={:phone} size="xl" placeholder="Phone" />
+        </InputGroup>
+      </Form>
+    </LeftToRight>
+    """
+  end
+
+  defp input_group_10_code() do
+    """
+    <LeftToRight class="items-center justify-around w-full items-end" dir="rtl">
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup>
+          <TextInput field={:country} size="xl" placeholder="Country" />
+          <TextInput field={:phone} size="xl" placeholder="Phone" />
+        </InputGroup>
+      </Form>
+
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup orientation="vertical">
+          <TextInput field={:country} size="xl" placeholder="Country" />
+          <TextInput field={:phone} size="xl" placeholder="Phone" />
+        </InputGroup>
+      </Form>
+    </LeftToRight>
+    """
+  end
+
+  defp input_group_100_code() do
+    """
+    <LeftToRight class="items-center justify-around w-full items-end">
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup>
+          <TextInput field={:email} size="xl" placeholder="Email" type="email" />
+          <TextInput field={:password} size="xl" placeholder="Password" type="password" id="password1" />
+        </InputGroup>
+      </Form>
+
+      <Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
+        <InputGroup orientation="vertical">
+          <TextInput field={:email} size="xl" placeholder="Email" type="email" />
+          <TextInput field={:password} size="xl" placeholder="Password" type="password" id="password2" />
+        </InputGroup>
+      </Form>
+    </LeftToRight>
+    """
+  end
+end
diff --git a/lib/moon_web/pages/components/text_input/text_input_page.ex b/lib/moon_web/pages/components/text_input/text_input_page.ex
index 91507bca0..f4a30ad87 100644
--- a/lib/moon_web/pages/components/text_input/text_input_page.ex
+++ b/lib/moon_web/pages/components/text_input/text_input_page.ex
@@ -34,7 +34,7 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
       %{
         :name => 'type',
         :type =>
-          'date | datetime-local" | email | number | password | search | tel | text | url | time | url',
+          'date | datetime-local | email | number | password | search | tel | text | url | time | url',
         :required => 'false',
         :default => 'text',
         :description => 'Different types of input'
@@ -323,10 +323,10 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
 
           <ExampleAndCode id="input_50" title="Size RTL">
             <:example>
-              <LeftToRight class="justify-between w-full items-end">
-                <TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl" />
-                <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl" />
-                <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl" />
+              <LeftToRight class="justify-between w-full items-end" dir="rtl">
+                <TextInput label="Medium (Default: md)" placeholder="Placeholder" />
+                <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
+                <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
               </LeftToRight>
             </:example>
 
@@ -335,10 +335,10 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
 
           <ExampleAndCode id="input_60" title="Without label">
             <:example>
-              <LeftToRight class="justify-between w-full items-end">
-                <TextInput placeholder="Placeholder" dir="rtl" />
-                <TextInput size="lg" placeholder="Placeholder" dir="rtl" />
-                <TextInput size="xl" placeholder="Placeholder" dir="rtl" />
+              <LeftToRight class="justify-between w-full items-end" dir="rtl">
+                <TextInput placeholder="Placeholder" />
+                <TextInput size="lg" placeholder="Placeholder" />
+                <TextInput size="xl" placeholder="Placeholder" />
               </LeftToRight>
             </:example>
 
@@ -406,7 +406,7 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
                   <Field name={:password}>
                     <TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag />
                   </Field>
-                  <div>
+                  <div class="pt-4">
                     <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
                   </div>
                 </TopToDown>
@@ -420,7 +420,7 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
         </Context>
 
         <div>
-          <div class="text-bulma-100 items-center text-moon-20 font-normal my-4">TabLink Props Tabs</div>
+          <div class="text-bulma-100 items-center text-moon-20 font-normal my-4">Text Input Props</div>
           <Table items={@props_info_array}>
             <Column name="name" label="Name" :let={item: item} is_row_header>
               {item.name}
@@ -715,7 +715,7 @@ defmodule MoonWeb.Pages.Components.TextInputPage do
         <Field name={:password}>
           <TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag/>
         </Field>
-        <div>
+        <div class="pt-4">
           <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
         </div>
       </TopToDown>
diff --git a/lib/moon_web/pages/components/text_input_group_page.ex b/lib/moon_web/pages/components/text_input_group_page.ex
deleted file mode 100644
index a7dd9c173..000000000
--- a/lib/moon_web/pages/components/text_input_group_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInputGroupPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias MoonWeb.Components.ComponentPageDescription
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input-group",
-        name: "Text Input Group"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <ComponentPageDescription title="TextInputGroup">
-        <p>
-          Coming soon...
-        </p>
-      </ComponentPageDescription>
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/tutorials/add_data_using_form/user.ex b/lib/moon_web/pages/tutorials/add_data_using_form/user.ex
index 00556b83c..a0081169c 100644
--- a/lib/moon_web/pages/tutorials/add_data_using_form/user.ex
+++ b/lib/moon_web/pages/tutorials/add_data_using_form/user.ex
@@ -7,13 +7,15 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm.User do
   alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
 
   @required_fields ~w(name email gender username password)a
-  @optional_fields ~w(document_filename agrees_to_marketing_emails agrees_to_terms_of_service permissions role)a
+  @optional_fields ~w(document_filename agrees_to_marketing_emails agrees_to_terms_of_service permissions role phone country)a
 
   schema "users" do
     field(:username, :string, default: "johndoe")
     field(:password, :string, default: "verysecret123")
     field(:name, :string, default: "First Last")
     field(:email, :string, default: "joe@doe.com")
+    field(:phone, :string)
+    field(:country, :string)
     field(:gender, :string, default: "male")
     field(:document_filename)
     field(:agrees_to_terms_of_service, :boolean, default: true)
diff --git a/lib/moon_web/router.ex b/lib/moon_web/router.ex
index 167f360e3..e3c0e2cf6 100644
--- a/lib/moon_web/router.ex
+++ b/lib/moon_web/router.ex
@@ -118,7 +118,7 @@ defmodule MoonWeb.Router do
 
       live "/components/text-input", MoonWeb.Pages.Components.TextInputPage
 
-      live "/components/text-input-group", MoonWeb.Pages.Components.TextInputGroupPage
+      live "/components/input-group", MoonWeb.Pages.Components.InputGroupPage
       live "/components/toast", MoonWeb.Pages.Components.ToastPage
       live "/components/tooltip", MoonWeb.Pages.Components.TooltipPage