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.

CodeSandbox

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.

CodeSandbox

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.

CodeSandbox

Props

NumberInputProps

Signature:

export declare type NumberInputProps = <, | | | | | | | | | | | | | | | | | | > & ( | ) & & & { /** Handler that is called when a key is pressed. */ onKeyDown?: <>; /** Handler that is called when the value changes. */ onChange?: (value: | ) => ; };

NumberInputUncontrolledProps

Signature:

export declare type NumberInputUncontrolledProps = { /** The default value of the input */ defaultValue?: ; /** The value of the input. */ value?: ; };

Name	Type	Default	Description
defaultValue?		-	The default value of the input

NumberInputControlledProps

Signature:

export declare type NumberInputControlledProps = { /** The default value of the input */ defaultValue?: ; /** The value of the input. */ value?: | ; };

Name	Type	Default	Description
value?	|	-	The value of the input.