Import
import { Field } from '@dnb/eufemia/extensions/forms'render(<Field.Number />)
Description
Field.Number is the base component for receiving user input where the target data is of type number.
There is a corresponding Value.Number component.
import { Field } from '@dnb/eufemia/extensions/forms'render(<Field.Number path="/myNumber" />)
Relevant links
When to use and not to use
Field.Number only allows the user to enter numbers (negative and positive) and decimal numbers.
If a number has the type of number, and cannot start with a zero, this field may be considered.
But for e.g. a customer number, you rather use Field.String.
Internally, it is used by e.g. Field.Currency.
Browser autofill
Check out the Field.String docs about autocomplete.
Step controls
When using showStepControls, the Number component provides buttons for decrementing and incrementing the input value, where the value of de/increment is determined by the step property.
It can also be used with Field.Currency.
Accessibility
The component does not include focusable buttons, aligning with accessibility considerations for keyboard-only users, who can utilize arrow keys for navigation, like the incrementable number input.
One of the reasons to make the buttons as not focusable is to avoid the keyboard-only users to tab through all the extra buttons during navigation.
Due to technical constraint, the Field.Number component will be announced as a stepper field – but will get the same instructions read out by a screen reader like VoiceOver, on how to change the value.