A number input is a controlled HTML form field for entering numeric values. In React, read evt.target.valueAsNumber instead of evt.target.value so the current value is handled as a number. section 9.2.5
Reading a numeric value
const [amount, setAmount] = useState(0); <input type="number" value={amount} onChange={(evt) => setAmount(evt.target.valueAsNumber)} /> section 9.2.5
Keep these distinctions in mind:
- The regular value property returns a string, while valueAsNumber returns the numeric value. section 9.2.5
- Number inputs include input types number and range; calendar inputs include date, datetime-local, month, time, and week. section 9.2.5
Figure 9.15 A table of various inputs available in HTML and React forms. Note how this includes mostly variations of input fields, but also a range of buttons and a drop-down.
Compare number inputs with other HTML and React form controls in the input reference table. section 9.2.5
