NumberInputV2

Use NumberInputV2 to let users enter integers and floating-point numbers.

OverviewPropertiesUsage

Import

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

Demo

This is the simplest version of the NumberInputV2, which is uncontrolled and therefore handles its state internally. You can also set a specific initial value using the defaultValue prop.

CodeSandbox

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.

CodeSandbox

Validate with min and max

The NumberInput has built-in support for the min and max props. When the entered value falls outside the allowed range, the component automatically displays a validation error. Add FormFieldMessages inside FormField to render those messages.

CodeSandbox

Validate with step

The step prop constrains the accepted values to specific increments. If the entered value does not align with the step (relative to min if provided), a validation error is shown automatically.

The value can be incremented or decremented in the following ways:

Interaction	Behaviour
↑ / ↓ arrow keys	Increment / decrement by one step
Scroll wheel (when focused)	Same as arrow keys
Home key	Jumps to min — only when min is set
End key	Jumps to max — only when max is set

Snap-to-step alignment: if the current value is not aligned with the step when an arrow key or scroll event fires, the first interaction snaps the value to the nearest step boundary instead of moving a full step — subsequent interactions then move by exactly one step as expected.

Clamping: stepping always respects min and max. The value will not go below min or above max. When max and step are both set, the highest reachable step-aligned value may be less than max if max is not itself step-aligned.

Read-only inputs: all step interactions are suppressed when the input is in readOnly mode.

CodeSandbox

Step multiplier

The stepMultiplier prop scales how far the value jumps when using the arrow keys or the scroll wheel. The total change per interaction is step × stepMultiplier (or just stepMultiplier when no step is set). The Home and End keys are not affected by stepMultiplier — they always jump directly to min or max. This is useful when users need both fine-grained control and the ability to make large adjustments quickly — for example, allocating memory where small tweaks matter but jumping by 10 at a time is also common. Note: stepMultiplier must be an integer. If a floating‑point value is provided, it is automatically truncated to its integer part before being applied.

CodeSandbox

Number formats and localization

The NumberInput uses the user's regional format (from @dynatrace-sdk/user-preferences) to interpret and display numbers. Because of this it accepts a wide range of input formats.

Valid number formats

A value is fully valid once it is parseable as a JavaScript number. The following formats are accepted:

Format	Example
Plain integer	42, -7, +100
Decimal	3.14 or 3,14 (locale-dependent decimal separator)
Scientific notation	1.5e3, -2.4E-6, 1e+10
Locale-grouped	1,234,567 (EN) / 1.234.567 (DE) / 1 234 567 (FR) / 1'234'567 (CH)

The input accepts . and , interchangeably as a decimal separator — the correct interpretation is inferred automatically from grouping context (e.g. 1,234 is treated as a grouped thousand, while 1,5 is treated as a decimal value of 1.5).

Typing behaviour

While the user is typing, the field is intentionally permissive: intermediate states such as -, 1., or 1.5e are kept in the input without being rejected. The onChange callback is only fired when a fully valid number can be parsed. Clearing the field fires onChange with null.

Paste behaviour

When a formatted number is pasted (e.g. 1,234,567.89 copied from a spreadsheet or 1.234.567,89 from a German locale), the component attempts to normalise it automatically. It strips locale-specific grouping separators (spaces, apostrophes ', commas, or dots used as thousands separators) and converts the remaining decimal separator to the value expected by the current locale. If the pasted string cannot be resolved to a valid number it is discarded and the previous value is restored.