NumberInput
This component is used to enter numbers
NumberInput is a wrapper over TextInput and used to enter numeric values. It is also possible to enter non-integer values. Via special props you can also change the format of numbers to enter numbers in a convenient format for the user.
Under the hood
Altrone uses react-number-format
library for numeric input. This library provides big number of properties for formatting numbers, like allowNegative
, decimalSeparator
and etc.
Because NumberInput is a wrapper over TextInput it uses NumericFormat
component from react-number-format
as custom Component
of TextInput.
Check the documentation of react-number-format
to get more information about the library:
Useful features
This component provides some useful features to make your work with numbers easier. In the right side of the input you can see a button with two arrows. If you click on one of these buttons you can increase or decrease the value of the field. Using the step
property, you can determine how much the value will change with each click.
In Altrone 1.3 was added multipliers for NumberInput. User can click on the button with pressed Alt
to increase or decrease the value into 10 times or with pressed Shift
to increase or decrease the value into 100 times.
To disable special features for numbers you have to pass false
into showControls
prop.
Altrone Options
This feature was added in Altrone 2.1
In Altrone 2.1, a new feature (called as Altrone Options) was introduced, allowing users to define default values for certain properties within this component. To achieve this, you can leverage either numberInput.useFormatFromLocale
, to determines the grouping and decimal delimiters based on the current locale for all NumberInputs throughout your application.
Properties
History
Altrone 2.0
:added
surface
propadded
elevation
prop
Altrone 1.3
:added opportunity to apply multipliers to the step when user clicks on increase or decrease button with pressed
Alt
andShift
button
Altrone 1.0
: initial release
Last updated