TTC
Theo's Typesafe Cult•2y ago
Del

React Hook Form: Number Input not respecting Min/Max values

<input
    {...register("fromAmount", {
        valueAsNumber: true,
        min: 5,
        max: price.data
            ? price.data.from.max
            : Infinity,
    })}
    type="number"
    className="col-start-1 row-start-1 h-full w-full rounded-xl bg-[#373254] pl-4"
/>
<input
    {...register("fromAmount", {
        valueAsNumber: true,
        min: 5,
        max: price.data
            ? price.data.from.max
            : Infinity,
    })}
    type="number"
    className="col-start-1 row-start-1 h-full w-full rounded-xl bg-[#373254] pl-4"
/>
Have some dynamic min/max values that I get from a trpc endpoint so I can't just define min/max values in my zod schema For some reason, I can't get number inputs to honor the min/max defined within the register params. https://codesandbox.io/s/sharp-wilson-578ie6?file=/src/App.tsx Any help/advice would be appreciated
1 Reply
isaac_way
isaac_way•2y ago
you should be able to define them in your zod schema still just create the zod schema in the component

Did you find this page helpful?