diff --git a/frontend/src/app/(portal)/admin/applications/[cycleId]/[role]/builder/components/LivePreview.tsx b/frontend/src/app/(portal)/admin/applications/[cycleId]/[role]/builder/components/LivePreview.tsx
index 3b0985e..e779d46 100644
--- a/frontend/src/app/(portal)/admin/applications/[cycleId]/[role]/builder/components/LivePreview.tsx
+++ b/frontend/src/app/(portal)/admin/applications/[cycleId]/[role]/builder/components/LivePreview.tsx
@@ -119,6 +119,7 @@ function PreviewField({ question }: { question: QuestionCardQuestion }) {
           max={10}
           placeholder="1-10"
           className="text-text-default focus:border-brand-blue focus:ring-brand-blue w-24 rounded-md border border-gray-300 px-4 py-2.5 text-base outline-none focus:ring-1"
+          onWheel={(e) => e.currentTarget.blur()}
         />
       )}
     </div>
diff --git a/frontend/src/components/ui/datetime-picker.tsx b/frontend/src/components/ui/datetime-picker.tsx
index 2292919..1a27319 100644
--- a/frontend/src/components/ui/datetime-picker.tsx
+++ b/frontend/src/components/ui/datetime-picker.tsx
@@ -231,6 +231,7 @@ function DateTimePicker({
                       handleHourChange(parsed)
                     }
                   }}
+                  onWheel={(e) => e.currentTarget.blur()}
                   className="focus:border-primary focus:ring-primary/20 h-8 w-10 rounded-md border border-gray-300 text-center text-sm font-medium focus:ring-2 focus:outline-none"
                 />
                 <span className="font-medium text-gray-400">:</span>
@@ -255,6 +256,7 @@ function DateTimePicker({
                       handleMinutesChange(String(parsed).padStart(2, '0'))
                     }
                   }}
+                  onWheel={(e) => e.currentTarget.blur()}
                   className="focus:border-primary focus:ring-primary/20 h-8 w-10 rounded-md border border-gray-300 text-center text-sm font-medium focus:ring-2 focus:outline-none"
                 />
                 <div className="ml-1 flex gap-1">
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 2971456..ddd1905 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -2,7 +2,12 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({
+  className,
+  type,
+  onWheel,
+  ...props
+}: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
@@ -11,6 +16,13 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
         'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-10 w-full min-w-0 rounded-lg border bg-transparent px-3.5 py-2.5 text-base transition-all outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-gray-300 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-base',
         className
       )}
+      onWheel={(e) => {
+        // A focused number input steals the scroll wheel to bump its value
+        // instead of scrolling the page — blur it first so scrolling past it
+        // (e.g. down a long form) never silently changes what you typed.
+        if (type === 'number') e.currentTarget.blur()
+        onWheel?.(e)
+      }}
       {...props}
     />
   )