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.
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Configuration Properties
Basic
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. |
Web Outline | By default, web browsers add a colored outline to many input components when they're focused for accessibility reasons. When enabled, the outline will be shown. |
Advanced
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. |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Triggers
Trigger name | Description |
---|---|
On Change Text | Starts the action when the text is changed |
On Return Key | Starts the action when the Return/Enter key is pressed |
On Focus | Starts the action when the element is focused |
On Blur | Starts the action when the element is blurred/unfocused |
On Change Text Delayed | Starts the action after a given delay from when editing has stopped (debouncing) |
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 about 2 months ago