Number Input
A basic and customizable Number Input field that logs user input from the keyboard. You can use a Number Input component to input the numbers to be stored or processed.
Adding Number Input component
To add the Number Input component:
- Select the Number Input component from the Components drawer. You can open the list of components by clicking the
+
button next to Components.
By default, the Number Input component includes a default value as 0.
Configuration Properties
Basic Configuration
Property | Description |
---|---|
Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Text Input. |
Disabled | Allows you to disable the input field |
Max length | Allows you to set a maximum number of characters that can be entered into the input. |
Placeholder Text | Text to appear while the text input is blank. |
Multiple Lines | When enabled, the text will wrap and extend to multiples lines instead of extending past the screen. |
Number of Lines | Only applicable when Multiple Lines is enabled. Allows you to set how many lines the text input will extend to. |
Underline Color | Android Only. Allows you to set the color of the line that appears under text when the user is finished typing. |
Placeholder Text Color | Allows you to set the color of the placeholder text. |
Clear Button Mode | iOS only. When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. |
Clear Text on Focus | When enabled, all text in the input will be deleted when the input is focused on. |
Enables Return Key Automatically | When enabled, the return key will be disabled until the user inputs text in the field. |
Underline Color | Color of underline (The line underneath the text when finished typing). (Android Only) |
Auto Focus | When enabled, the keyboard will open as soon as the screen loads, and the input will immediately be ready to use. |
Advanced Configuration
Property | Description |
---|---|
Hide Caret | When enabled, the cursor in the text input will be hidden. |
Hide Context Menu | When enabled, the context menu will become hidden. |
Keyboard Appearance | Determines the color of the keyboard. |
Keyboard Type | Allows you to select the type of keyboard that will appear when the user focuses on the text input. Examples |
Return Key Label | Android only alternative to Return Key Type. |
Return Key Type | Allows you to select the type of return key the user will see. |
Selection Color | Allows you to change the color of the highlight over selected text in the input. |
Select Text on Focus | If enabled, all text will automatically be selected on focus. |
Allow Font Scaling | When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings. |
Editable | Allows you to toggle if the text input is able to be used or not. |
Data Configuration
Property | Description |
---|---|
Data Source | Initialize the stateful component with a value from a data source. |
Using a Pre-filled Value
To use the Text Input field with an initial value:
- Go to the Data tab (third tab) in the Properties Panel.
- In the Initial Value property, enter the text.
Styling the Text in the Number Input field
To customize the styles of text in the Number Input field:
- Go to the Styles tab (first tab) in the Properties Panel.
- Under Style section, you can modify Font, Size, Color, etc.
Customize Number Input
To customize the Number` Input field:
- Go to the Styles tab (first tab) in the Properties Panel.
- You can now modify Background Color, apply padding, change border radius, border color, etc.
Updated 11 months ago