NumberInputNumber Input allows users to enter numeric values (e.g., amount, price, quantity.) in a single line input field, using a masked input. Number Input comes as a stand alone input- as main or only input in a screen.

Overview

Usage Examples

The number input uses masked input, it allows the user to easily enter fixed set input where a certain format is needed (in this case- numeric values for prices with decimals, amounts, weight). \n \n The masked input allows a more focused typing format, compared to the Main Input which allows the user to type more freely.

Number Types

The price input supports the usage of prefix, sufix or none; depending on the case. The supported number types presets are: Currency, Percentage, Weight, or number only. \n \n Don’t use it to enter unique numeric values such as phone numbers or dates.

Type	Component
Currency
Percentage
Weight
Number only

States

NumberInput comes as stand alone Input, as Main or only input in a screen \n \n Style: \n \n Label is optional\n Label & error message- “bodySmallMedium”\n Number - “text30M”\n Currency / Percentage- “text50M”\n

State	Component
Inactive Label - $textDefault\n Value - $textDefault\n Divider - $outlineDisabled
Active / Typing Once in focus, Keyboard opens\n Label - $textDefault\n Value - $textDefault\n Divider - $outlinePrimary
Disabled Label - $textDisabled\n Value - $textDisabled\n Divider - $outlineDisabled
Validation error markdown:An error can be caused when the entered amount is higher than the max value. \n \n Label - $textDefault\n Value - $textDefault\n Validation message - $textDangerLight Validation\n icon - $iconDangerLight\n Divider - $outlineDanger

Specs

Max width S5 padding from screen’s edge.\n S4 inside padding.

UX Guidelines

Do’s & Don'ts

Dev

UsageCode Example

<NumberInput initialValue={1506} onChange={onChange} placeholder={'Price'}/>

APIThis is the list of additional props for the component

containerStyle

ViewStyle

Container style of the whole component

contextMenuHidden

boolean

If true, context menu is hidden.. Default is trueRequires @react-native-community/clipboard to be installed.

fractionDigits

number

Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.. Default is 2

initialNumber

number

A valid number (in en locale, i.e. only digits and a decimal point).

leadingText

string

A leading text

leadingTextStyle

TextStyle

The style of the leading text

onChangeNumber

(data: NumberInputData) => void

Required

Callback that is called when the number value has changed.

textFieldProps

TextFieldProps

Most of TextField's props can be applied, except for ones that are passed directly via named props.

trailingText

string

A trailing text

trailingTextStyle

TextStyle

The style of the trailing text