NumberInput

Deprecated

This component is deprecated and will be removed in a future release. Please use the NumberInputV2 component instead.

Number inputs let users enter and edit integers and floating-point numbers.

OverviewProperties

Import

import { NumberInput } from '@dynatrace/strato-components/forms';

Demo

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 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

For validation patterns including custom hints and errors, see show custom hints and errors in the FormField documentation.