Theo's Typesafe Cult•2y ago

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•2y ago

you should be able to define them in your zod schema still just create the zod schema in the component

Gaming

Programming

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