Text Input
A text input field. Used for creating forms.
Properties
name: string
The name of the field. It will be sent to the API when the form is submitted.
formId: string
The identifier of the form. Fields with the same form identifiers are sent to the API together.
placeholder: string
Text displayed when the field is empty. Serves as a hint to the user.
initialValue: string
The initial value in the field when the screen is displayed.
inputmode: string
Default: text
The type of input value. Changes the appearance of the virtual keyboard on mobile devices and affects input suggestion associations in the browser. The value tel changes the appearance of the field for easier number entry.
Possible values: text, decimal, tel, email, url, password
returnKeyType: KeyType
Default: done
The appearance of the input button on the virtual keyboard. Only in mobile applications.
Possible values: done, go, next, search, send
disabled: bool
Default: false
The field becomes inactive and the value cannot be changed.
multiline: bool
Default: false
Multiline field.
autoFocus: bool
Default: false
Automatically sets focus to the input field when the screen is displayed.
autoCorrect: bool
Default: true
Text auto-correction upon input. Only in mobile applications.
autocapitalize: Capitalize
Default: sentences
Capitalization options for the virtual keyboard in mobile browsers: off; by sentences; by words; each character.
Possible values: none, sentences, words, characters
maxLength: number
Limit on the maximum length of the input text in characters.
onChange: Action
Action triggered upon text input.
onReturnKeyPress: Action
Default: onChange
Action triggered upon pressing the input button. By default, it triggers the same action specified in onChange.
style
-
width,maxWidth,minWidth
Width of the block. More details. -
height,maxHeight,minHeight
Height of the block. More details. -
padding,paddingHorizontal,paddingVertical,paddingTop,paddingRight,paddingBottom,paddingLeft
Internal padding of the container. More details. -
margin,marginHorizontal,marginVertical,marginTop,marginRight,marginBottom,marginLeft
External margins of the block. More details. -
position
Positioning method of the block: relative or absolute. More details. -
top,right,bottom,left
Offset from the original position. More details. -
color
Text color. More details. -
fontFamily
Name of the font family. More details. -
fontSize
Font size. More details. -
fontStyle
Ability to set the font to italic. More details. -
fontWeight
Font weight. More details. -
fontVariant
Ability to use monospaced digits. More details. -
letterSpacing
Letter spacing of the font. More details. -
lineHeight
The amount of space allocated for one line of text in height. More details. -
textAlign
Principle of text alignment. More details. -
textDecorationLine
Adding underline or strikethrough to the text. More details. -
textShadowColor
Color of the text shadow. More details. -
textShadowOffset
Offset of the shadow horizontally and vertically. More details. -
textShadowRadius
Depth of shadow blur in pixels. More details. -
textTransform
Transformation of text upon display. More details. -
border
Setting borders for the block on all four sides: thickness, style, and color. More details. -
borderTop,borderRight,borderBottom,borderLeft
Setting individual borders for the sides of the block: thickness and color. More details. -
borderRadius,borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius
Rounding the corners of the borders. More details. -
borderWidth,borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth
Thickness of the borders. More details. -
borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor
Color of the borders. More details. -
backgroundColor
Background color of the block. More details. -
backgroundGradient
Background gradient of the block. More details. -
opacity
Opacity of the entire block with its content. More details. -
elevation
Height of the shadow. More details. -
shadowColor
Color of the block's shadow. More details. -
flexBasis
Initial size of the block along the main axis of the container. More details. -
flexGrow
Growth factor of the block along the main axis of the container. More details. -
flexShrink
Shrinkage factor of the block along the main axis of the container. More details. -
flex
Defines the size behavior of the block (growth, shrinkage, and initial size) along the main axis of the container. More details. -
alignSelf
Alignment of a specific block across the main axis of the container. More details.
Examples
Styling Fields
Simple Form
Two input fields. Data is sent to the API upon button press.
Form with Auto Submit on Input
Form with Additional Parameters
Data is sent to the API both automatically upon change and upon button press. In both cases, an additional parameter submitType indicating the submission method is passed.
Form with Data Validation on Input
Data is sent to the API for validation upon input, and to the API for submission upon button press.
