Setting "max" on an Input with type "number" in Chakra-UI - reactjs

Question

While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs.
import {
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Input,
} from "#chakra-ui/react";
const DefaultInput = ({
isInvalid,
label,
helperText,
errorMessage,
...otherProps
}) => {
return (
<FormControl isInvalid={isInvalid}>
{label && <FormLabel>{label}</FormLabel>}
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
{!isInvalid ? (
<FormHelperText>{helperText}</FormHelperText>
) : (
<FormErrorMessage>{errorMessage}</FormErrorMessage>
)}
</FormControl>
);
};
export default DefaultInput;
Used it like this but it doesn't seem to take notice of the "max" property.
<DefaultInput
value={custom.credits}
isInvalid={creditsError}
helperText={"Minimum of 50 Credits."}
errorMessage={"Please enter a valid number above 50."}
maxW={isNotSmallerScreen ? "50%" : "70%"}
fontSize={!isNotSmallerScreen ? "12px" : "16px"}
onChange={handleCustomCredit}
type="number"
placeholder="Enter Credits"
name="credits"
max="5000"
/>
I've also tried manually declaring the "max" and "type" within the component I created but still nothing.
.....
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
max="5000"
type="number"
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
.....

Answer 1

This is actually a browser quirk and not related to Chakra. max HTML5 attribute won't actually restrict you from typing larger numbers until you submit the containing form. If you want to limit it on the fly you have to build out your own function.
Unless you aren't seeing anything on submit either? See this example of what you should see https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min.