Bug reportNov 7, 2026· 0:22· 13 views
react-hook-form 7.90.0: register ignores defaultValues for type="range" and type="color" inputs
0:22 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumreact-hook-form register/field initialization for non-text native inputs (type="range", possibly type="color"). Check how defaultValues are applied versus the browser-supplied default DOM value.
os: macOSdpr: 1react: 18.3.1locale: en-USsource: unpkg.combrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720react-hook-form: 7.90.0
Repro steps
- 1.Load a page with react-hook-form 7.90.0 and React 18.3.1 from unpkg.com.
- 2.Register a type="text" input with defaultValues.name = "hello" as a control.
- 3.Register a type="range" input with defaultValues.brightness = 35.
- 4.Observe the rendered slider position and the brightness readout after mount.
Expected
The range slider renders at 35/100 (35%) and the form value for brightness is 35, matching defaultValues.
Actual
The range slider renders at the midpoint and the readout shows 50. The helper text says the browser fills midpoint 50 and it is treated as a user edit. The control text input correctly shows 'hello'.
Evidence
visualControl card type="text" is marked WORKS. The input shows 'hello' and the helper text says form.watch("name") = "hello", which matches defaultValues.
visualBug card type="range" shows defaultValues.brightness = 35, but the slider sits at the midpoint and the readout shows 50.
visualHelper text reads: Expected slider position 35/100 (35%), Actual 50/100 (browser fills midpoint 50; treated as user edit, regression since 7.90.0).
visualGreen label '35% (expected)' and red label '50% (actual) ✕' appear above the slider track.
visualReadout still shows 50 and the slider is still at 50%. The control input still shows 'hello'.
consoleThree parser-blocking cross-site script warnings for the unpkg.com scripts react, react-dom and react-hook-form@7.90.0. These are document.write warnings and are likely unrelated to the bug.
Issue markdown (copy-paste ready)
## Summary
In react-hook-form 7.90.0, `register` does not apply `defaultValues` to a `type="range"` input. The slider renders at the browser midpoint (50) instead of the configured default (35). A `type="text"` control works correctly.
The issue title also names `type="color"`, but that case is not shown in this recording.
## Environment
- Chromium 151.0.7922.34, macOS, 1280x720, dpr 1
- react-hook-form 7.90.0, React 18.3.1, loaded from unpkg.com
## Steps to reproduce
1. Load react-hook-form 7.90.0 with React 18.3.1 (0s).
2. Register a `type="text"` input with `defaultValues.name = "hello"` as a control (1s).
3. Register a `type="range"` input with `defaultValues.brightness = 35` (1s).
4. Observe the slider position and the readout after mount (1s).
## Expected
The slider renders at 35/100 and the brightness value is 35.
## Actual
The slider renders at 50/100 and the readout shows 50. The page helper text says the browser fills midpoint 50 and it is treated as a user edit.
## Control (works)
At 1s the `type="text"` input shows `hello`. The helper text says `form.watch("name") = "hello"`, which matches defaultValues.
## Evidence
- 1s: The range card shows `defaultValues.brightness = 35` but the readout shows 50.
- 9s: Labels `35% (expected)` and `50% (actual) ✕` appear over the slider.
- 21s: The state is unchanged. The slider is still at 50.
- 0s: The console shows parser-blocking cross-site script warnings for the unpkg scripts. These are likely unrelated.
## Suggested area
Field registration and default value initialization for native range (and possibly color) inputs. The DOM default value appears to override `defaultValues`.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →