diff --git a/components/Forms/BookingWidget/FormContent/Input/index.tsx b/components/Forms/BookingWidget/FormContent/Input/index.tsx
new file mode 100644
index 000000000..762d48cf3
--- /dev/null
+++ b/components/Forms/BookingWidget/FormContent/Input/index.tsx
@@ -0,0 +1,22 @@
+import React, { forwardRef, InputHTMLAttributes } from "react"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./input.module.css"
+
+const Input = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+>(function InputComponent(props, ref) {
+  return (
+    <Body asChild>
+      <input
+        {...props}
+        ref={ref}
+        className={`${styles.input} ${props.className}`}
+      />
+    </Body>
+  )
+})
+
+export default Input
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index c6d69d45b..8ecd56e6b 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -13,10 +13,10 @@ import { useIntl } from "react-intl"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import Input from "../Input"
 import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
 import SearchList from "./SearchList"
 
-import inputStyles from "../Input/input.module.css"
 import styles from "./search.module.css"
 
 import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
@@ -143,29 +143,27 @@ export default function Search({ locations }: SearchProps) {
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
-            <Body asChild>
-              <input
-                {...getInputProps({
-                  className: `${styles.searchInput} ${inputStyles.input}`,
-                  id: name,
-                  onFocus(evt) {
-                    handleOnFocus(evt)
-                    openMenu()
+            <Input
+              {...getInputProps({
+                className: styles.input,
+                id: name,
+                onFocus(evt) {
+                  handleOnFocus(evt)
+                  openMenu()
+                },
+                placeholder: intl.formatMessage({
+                  id: "Destinations & hotels",
+                }),
+                ...register(name, {
+                  onBlur: function () {
+                    handleOnBlur()
+                    closeMenu()
                   },
-                  placeholder: intl.formatMessage({
-                    id: "Destinations & hotels",
-                  }),
-                  ...register(name, {
-                    onBlur: function () {
-                      handleOnBlur()
-                      closeMenu()
-                    },
-                    onChange: handleOnChange,
-                  }),
-                  type: "search",
-                })}
-              />
-            </Body>
+                  onChange: handleOnChange,
+                }),
+                type: "search",
+              })}
+            />
           </div>
           <SearchList
             getItemProps={getItemProps}
diff --git a/components/Forms/BookingWidget/FormContent/Search/search.module.css b/components/Forms/BookingWidget/FormContent/Search/search.module.css
index 92ae3731d..ce87eb473 100644
--- a/components/Forms/BookingWidget/FormContent/Search/search.module.css
+++ b/components/Forms/BookingWidget/FormContent/Search/search.module.css
@@ -7,32 +7,24 @@
 }
 
 .container:hover,
-.container:has(
-    .searchInput:active,
-    .searchInput:focus,
-    .searchInput:focus-within
-  ) {
+.container:has(input:active, .input:focus, .input:focus-within) {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 
-.container:has(
-    .searchInput:active,
-    .searchInput:focus,
-    .searchInput:focus-within
-  ) {
+.container:has(input:active, .input:focus, .input:focus-within) {
   border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
 }
 
 .label:has(
-    ~ .inputContainer .searchInput:active,
-    ~ .inputContainer .searchInput:focus,
-    ~ .inputContainer .searchInput:focus-within
+    ~ .inputContainer .input:active,
+    ~ .inputContainer .input:focus,
+    ~ .inputContainer .input:focus-within
   )
   p {
   color: var(--UI-Text-Active);
 }
 
-.container:hover:has(.searchInput:not(:active, :focus, :focus-within))
-  .searchInput::-webkit-search-cancel-button {
+.container:hover:has(.input:not(:active, :focus, :focus-within))
+  .input::-webkit-search-cancel-button {
   display: none;
 }
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index 003d35a6a..0a9841a43 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -1,11 +1,12 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import inputStyles from "@/components/Forms/BookingWidget/FormContent/Search/search.module.css"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
+import Input from "../Input"
+
 import styles from "./voucher.module.css"
 
 export default function Voucher() {
@@ -32,20 +33,13 @@ export default function Voucher() {
         arrow="left"
       >
         <div className={styles.vouchers}>
-          <div className={styles.vouchersHeader}>
+          <label>
             <Caption color="disabled" textTransform="bold">
               {vouchers}
             </Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </div>
-          <Body asChild>
-            <input
-              type="text"
-              placeholder={addVouchers}
-              className={inputStyles.input}
-              disabled
-            />
-          </Body>
+          </label>
+          <Input type="text" placeholder={addVouchers} disabled />
         </div>
       </Tooltip>
       <Tooltip
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 845501981..8f3e8cbc4 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -10,11 +10,11 @@ import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import Input from "./Input"
 import Search from "./Search"
 import Voucher from "./Voucher"
 
 import styles from "./formContent.module.css"
-import inputStyles from "./Input/input.module.css"
 
 import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
 
@@ -47,16 +47,12 @@ export default function FormContent({
             <DatePicker />
           </div>
           <div className={styles.rooms}>
-            <Caption color="red" textTransform="bold">
-              {rooms}
-            </Caption>
-            <Body asChild>
-              <input
-                type="text"
-                placeholder={rooms}
-                className={inputStyles.input}
-              />
-            </Body>
+            <label>
+              <Caption color="red" textTransform="bold">
+                {rooms}
+              </Caption>
+            </label>
+            <Input type="text" placeholder={rooms} />
           </div>
         </div>
         <div className={styles.voucherContainer}>
