NumberInput
Number inputs let users enter and edit integers and floating-point numbers.
Import
import { NumberInput } from '@dynatrace/strato-components-preview/forms';
Use cases
This is the simplest version of the NumberInput
, which is uncontrolled and
therefore handles its state internally. You can also set a specific initial
value using the defaultValue
prop.
Control the state
The NumberInput
can also be controlled, meaning that you can handle the state.
To do so, you need to use the onChange
prop to provide a handler that is
called when a valid number can be received. Which is when the input gets
blurred or a step button is clicked - it does not happen on typing. You also
need to assign the value from the state to the NumberInput
by setting the
value
prop.
Validate
This example shows how you can validate the NumberInput
using the
react-hook-form
package, which handles error messages. For connecting the form
with the NumberInput
and validating, you need to register the field with
custom error messages and use the useForm
hook from react-hook-form
. Also,
by using the controlState
prop, you can override the error messages and
connect the input's error state and message to that of the form. This shows a
hint in case of an error and applies proper styling to the component.