Back

addTextField

JS Py
Hello World
Content:
- Examples
- Properties
- Methods

A TextField in mobile UI design is an input field where users can enter text or numeric data.

tfd = ui.addTextField( parent, text, options?, width?, height? ) → ui object: TextField

If you want a materialize date and time pickers, see DatePicker, TimePicker or DateTimePicker components.

Here are the methods available for the TextField Component.

Examples

Example - Textfield variants

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 1, 0, 1, "rem")

        // Add a default textfield control to the main layout
        this.tfd1 = ui.addTextField( this.main )
        this.tfd1.label = "Enter text"

        // Handle textfield value changes
        this.tfd1.setOnChange( this.onChange )

        // Add a filled textfield control
        this.tfd2 = ui.addTextField(this.main, "", "Filled,Primary,Number")
        this.tfd2.label = "Enter number"
        this.tfd2.setOnChange( this.onChange )

        // Add an outlined textfield control
        this.tfd3 = ui.addTextField(this.main, "", "Outlined,Secondary,Email")
        this.tfd3.label = "Enter email"
        this.tfd3.setOnChange( this.onChange )

        this.popup = ui.showPopup( "" )
        this.popup.hide()
    }

    onChange( value )
    {
        this.popup.text = value
        this.popup.show()
    }
}
from hybrid import ui

def OnStart():
    global popup
    # Creates a layout with objects vertically centered
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    main.setChildMargins(0, 1, 0, 1, "rem")

    # Add a default textfield control to the main layout
    tfd1 = ui.addTextField(main)
    tfd1.label = "Enter text"

    # Handle textfield value changes
    tfd1.setOnChange(onChange)

    # Add a filled textfield control
    tfd2 = ui.addTextField(main, "", "Filled,Primary,Number")
    tfd2.label = "Enter number"
    tfd2.setOnChange(onChange)

    # Add an outlined textfield control
    tfd3 = ui.addTextField(main, "", "Outlined,Secondary,Email")
    tfd3.label = "Enter email"
    tfd3.setOnChange(onChange)

    popup = ui.showPopup("")
    popup.hide()

def onChange(value):
    popup.text = value
    popup.show()
Copy All       Run      

Example - Callbacks

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0.01, 0.01, 0.01, 0.05)

        // Add a default textfield control to the main layout
        this.tfd = ui.addTextField(this.main, "", "Outlined,Secondary")
        this.tfd.label = "Enter text"

        // Add a callback handler when the value changes
        this.tfd.setOnChange( this.onChange )

        // Add a callback handler on submit event
        this.tfd.setOnEnter( this.onEnter )

        // Add a button control to the main layout that will get the value
        // of the textfield when clicked
        this.btn = ui.addButton(this.main, "Get value", "Outlined,Secondary")
        this.btn.setOnTouch( this.btn_onTouch )

        // Initialize a popup to display values
        this.popup = ui.showPopup( "" )
        this.popup.hide()
    }

    onChange( value )
    {
        this.popup.text = "Change : " + value
        this.popup.show()
    }

    onEnter( value )
    {
        this.popup.text = "Enter : " + value
        this.popup.show()
    }

    btn_onTouch()
    {
        this.popup.text = "Value : " + this.tfd.text
        this.popup.show()
    }
}
from hybrid import ui

def OnStart():
    global popup, tfd
    # Creates a layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    main.setChildMargins(0.01, 0.01, 0.01, 0.05)

    # Add a default textfield control to the main layout
    tfd = ui.addTextField(main, "", "Outlined,Secondary")
    tfd.label = "Enter text"

    # Add a callback handler when the value changes
    tfd.setOnChange(onChange)

    # Add a callback handler on submit event
    tfd.setOnEnter(onEnter)

    # Add a button control to the main layout that will get the value
    # of the textfield when clicked
    btn = ui.addButton(main, "Get value", "Outlined,Secondary")
    btn.setOnTouch(btn_onTouch)

    # Initialize a popup to display values
    popup = ui.showPopup("")
    popup.hide()

def onChange(value):
    popup.text = "Change : " + value
    popup.show()

def onEnter(value):
    popup.text = "Enter : " + value
    popup.show()

def btn_onTouch(event):
    popup.text = "Value : " + tfd.text
    popup.show()
Copy All       Run      

Example - Multiline textfield

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a text control to the main layout
        this.txt = ui.addText(this.main, "This is a multiline type of TextField input", "Left", 0.8)
        this.txt.setMargins(0, 0, 0, 0.05)

        // Add a Multiline textfield control to the main layout
        this.tfd = ui.addTextField(this.main, "", "Outlined,Secondary,Multiline", 0.8)
        this.tfd.label = "Enter description"
        this.tfd.setRows(3, 6)
    }
}
from hybrid import ui

def OnStart():
    # Creates a layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")

    # Add a text control to the main layout
    txt = ui.addText(main, "This is a multiline type of TextField input", "Left", 0.8)
    txt.setMargins(0, 0, 0, 0.05)

    # Add a Multiline textfield control to the main layout
    tfd = ui.addTextField(main, "", "Outlined,Secondary,Multiline", 0.8)
    tfd.label = "Enter description"
    tfd.setRows(3, 6)
Copy All       Run      

Example - Advance textfield

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,ScrollY,FillXY")
        this.main.setChildMargins(0.01, 0.01, 0.01, 0.01)

        // Start and end adornment
        ui.addText(this.main, "Click the eye icon to show password.", "Left", 0.7)
        this.tfd = ui.addTextField(this.main, "", "Outlined,Secondary,Password", 0.7)
        this.tfd.label = "Enter password"
        this.tfd.setStartAdornment("lock", "Icon")
        this.tfd.setEndAdornment("visibility_off", "Icon,Touchable")
        this.tfd.setEndAdornmentOnTouch( this.togglePasswordVisibility )

        // Start Adornment text
        ui.addText(this.main, "Start text adornment", "Left,Overline", 0.7)
        this.tfd1 = ui.addTextField(this.main, "", "Outlined,Secondary,Number", 0.7)
        this.tfd1.label = "Enter mass"
        this.tfd1.setStartAdornment("KG", "Text")

        // Start Adornment icon
        ui.addText(this.main, "Start icon adornment", "Left,Overline", 0.7)
        this.tfd2 = ui.addTextField(this.main, "", "Outlined,Secondary", 0.7)
        this.tfd2.label = "Enter username"
        this.tfd2.setStartAdornment("person", "Icon")

        // End Adornment text
        ui.addText(this.main, "End text adornment", "Left,Overline", 0.7)
        this.tfd3 = ui.addTextField(this.main, "", "Outlined,Secondary,Number", 0.7)
        this.tfd3.label = "Enter amount"
        this.tfd3.setEndAdornment("$", "Text")

        // End Adornment icon
        ui.addText(this.main, "End icon adornment", "Left,Overline", 0.7)
        this.tfd4 = ui.addTextField(this.main, "", "Outlined,Secondary,Password", 0.7)
        this.tfd4.label = "Enter password"
        this.tfd4.setEndAdornment("lock", "Icon")
    }

    togglePasswordVisibility()
    {
        if(this.tfd.endAdornment == "visibility_off")
        {
            this.tfd.setEndAdornment("visibility_on", "icon,touchable")
            this.tfd.inputType = 'text'
        }
        else
        {
            this.tfd.setEndAdornment("visibility_off", "icon,touchable")
            this.tfd.inputType = 'password'
        }
    }
}
from hybrid import ui

def OnStart():
    # Creates a layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "VCenter,ScrollY,FillXY")
    main.setChildMargins(0.01, 0.01, 0.01, 0.01)

    # Start and end adornment
    ui.addText(main, "Click the eye icon to show password.", "Left", 0.7)
    tfd = ui.addTextField(main, "", "Outlined,Secondary,Password", 0.7)
    tfd.label = "Enter password"
    tfd.setStartAdornment("lock", "Icon")
    tfd.setEndAdornment("visibility_off", "Icon,Touchable")
    tfd.setEndAdornmentOnTouch(togglePasswordVisibility)

    # Start Adornment text
    ui.addText(main, "Start text adornment", "Left,Overline", 0.7)
    tfd1 = ui.addTextField(main, "", "Outlined,Secondary,Number", 0.7)
    tfd1.label = "Enter mass"
    tfd1.setStartAdornment("KG", "Text")

    # Start Adornment icon
    ui.addText(main, "Start icon adornment", "Left,Overline", 0.7)
    tfd2 = ui.addTextField(main, "", "Outlined,Secondary", 0.7)
    tfd2.label = "Enter username"
    tfd2.setStartAdornment("person", "Icon")

    # End Adornment text
    ui.addText(main, "End text adornment", "Left,Overline", 0.7)
    tfd3 = ui.addTextField(main, "", "Outlined,Secondary,
Copy All       Run      

Properties

The following properties are available on the TextField object:

absHeight → Number
absLeft → Number
absTop → Number
absWidth → Number
autoFocus → Boolean
backColor → String
backImage → String
border → Number
borderColor → String
borderStyle → String
color → String
cornerRadius → Number
disabled → Boolean
el → Object
elStyle → String
endAdornment → String
error → Boolean
fontFile → String
height → Number
helperText → String
hint → String
inputType → String
isVisible → Boolean
label → String
labelColor → String
left → Number
margins → List
maxRows → Number
minRows → Number
opacity → Number
options → String
outlineColor → String
padding → List
parent → Object
placeholder → String
position → Object
required → Boolean
rotation → Number
sizeVariant → String
startAdornment → String
stepIncrement → Number
text → String
textColor → String
textSize → Number
top → Number
type → String
variant → String
visibility → String
width → Number

Methods

The following methods are available on the TextField object:

animate( anim, duration )
bringForward( zIndex )
destroy()
focus()
getEndAdornment() → String
getPosition( options ) → Object
getStartAdornment() → String
gone()
hide()
sendBackward( zIndex )
setBorder( left?, top?, right?, bottom?, clr?, style? )
setCornerRadius( tl?, tr?, br?, bl?, mode? )
setEndAdornment( text, type? )
setEndAdornmentOnTouch( callback )
setMargins( left?, top?, right?, bottom?, mode? )
setOnChange( callback )
setOnContextMenu( callback )
setOnEnter( callback )
setOnFocus( callback )
setPadding( left?, top?, right?, bottom?, mode? )
setPosition( left, top, mode )
setRows( min?, max? )
setScale( x, y )
setSize( width, height, mode )
setStartAdornment( text, type? )
setStartAdornmentOnTouch( callback )
show()
Number: Fraction of the parent width `[0-1]`.
Number: Fraction of the parent height `[0-1]`.
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Border-top thickness in pixels.
Number: Border-right thickness in pixels.
Number: Border-bottom thickness in pixels.
Number: Top-Left border radius.
Number: Top-Right border radius.
Number: Bottom-Right border radius.
Number: Bottom-Left border radius.
Number: Left margin. You can also pass string e.g. `12rem`
Number: Top margin. You can also pass string e.g. `12rem`
Number: Right margin. You can also pass string e.g. `12rem`
Number: Bottom margin. You can also pass string e.g. `12rem`
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the parent height. [0-1]
Number: The minimum number of rows.
Number: The maximum number of rows.
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
String: “The initial value of the TextField”
String: “A comma separated options.
Theme Color: `Primary`”, “ `Secondary`
Sizes: `Small`”, “ `Medium`
Type: `Text`”, “ `Password`”, “ `Email`”, “ `Search`”, “ `Number`”, “ `Date`”, “ `Time`”, “ `DateTime`
Variant: `Standard`”, “ `Filled`”, “ `Outlined`
TextArea: `Multiline`
Utils: `Autofocus`”
String: “The type of animation. Here are the available values
`bounce`”, “ `flash`”, “ `pulse`”, “ `rubberBand`”, “ `shakeX`”, “ `shakeY`”, “ `headShake`”, “ `swing`”, “ `tada`”, “ `wobble`”, “ `jello`”, “ `heartBeat`”, “
Back Entrances: `backInDown`”, “ `backInLeft`”, “ `backInRight`”, “ `backInUp`
Back Exits: `backOutDown`”, “ `backOutLeft`”, “ `backOutRight`”, “ `backOutUp`
Bouncing Entrances: `bounceIn`”, “ `bounceInDown`”, “ `bounceInLeft`”, “ `bounceInRight`”, “ `bounceInUp`
Bouncing exits: `bounceOut`”, “ `bounceOutDown`”, “ `bounceOutLeft`”, “ `bounceOutRight`”, “ `bounceOutUp`
Fading entrances: `fadeIn`”, “ `fadeInDown`”, “ `fadeInDownBig`”, “ `fadeInLeft`”, “ `fadeInLeftBig`”, “ `fadeInRight`”, “ `fadeInRightBig`”, “ `fadeInUp`”, “ `fadeInUpBig`”, “ `fadeInTopLeft`”, “ `fadeInTopRight`”, “ `fadeInBottomLeft`”, “ `fadeInBottomRight`
Fading exits: `fadeOut`”, “ `fadeOutDown`”, “ `fadeOutDownBig`”, “ `fadeOutLeft`”, “ `fadeOutLeftBig`”, “ `fadeOutRight`”, “ `fadeOutRightBig`”, “ `fadeOutUp`”, “ `fadeOutUpBig`”, “ `fadeOutTopLeft`”, “ `fadeOutTopRight`”, “ `fadeOutBottomRight`”, “ `fadeOutBottomLeft`
Flippers: `flip`”, “ `flipInX`”, “ `flipInY`”, “ `flipOutX`”, “ `flipOutY`
Lightspeed: `lightSpeedInRight`”, “ `lightSpeedInLeft`”, “ `lightSpeedOutRight`”, “ `lightSpeedOutLeft`
Rotating Entrances: `rotateIn`”, “ `rotateInDownLeft`”, “ `rotateInDownRight`”, “ `rotateInUpLeft`”, “ `rotateInUpRight`
Rotating Exits: `rotateOut`”, “ `rotateOutDownLeft`”, “ `rotateOutDownRight`”, “ `rotateOutUpLeft`”, “ `rotateOutUpRight`
Specials: `hinge`”, “ `jackInTheBox`”, “ `rollIn`”, “ `rollOut`
Zooming Entrances: `zoomIn`”, “ `zoomInDown`”, “ `zoomInLeft`”, “ `zoomInRight`”, “ `zoomInUp`
Zooming Exits: `zoomOut`”, “ `zoomOutDown`”, “ `zoomOutLeft`”, “ `zoomOutRight`”, “ `zoomOutUp`
Sliding Entrances: `slideInDown`”, “ `slideInLeft`”, “ `slideInRight`”, “ `slideInUp`
Sliding Exits: `slideOutDown`”, “ `slideOutLeft`”, “ `slideOutRight`”, “ `slideOutUp`”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal format `#rrggbb`.”
String: “Border-styles. Values can be `dotted`”, “ `dashed`”, “ `solid`”, “ `double`”, “ `groove`”, “ `ridge`”, “ `inset` and `outset`. Default is `solid`”
String: “Unit of measurement. Values are `px` `rem` or `%`.”
String: “Text or material icon font.”
String: “A comma separated options for end adornment control. Options can be
`Icon` : If the adornment is an icon.
`Touchable` : If the adornment is touchable.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimension.
`v` relative to viewport dimension.”
String: “Unit of measurement.
`rem` for root em.
`px` for pixels
`%` relative to its parent dimensions
`v` relative to viewport dimensions.”
String: “Unit of measurment. Can be "px"”, “ "rem"”, “ "%"”, “ "v" for viewport width/height or any css supported unit.”
String: “A comma separated options for start adornment control. Options can be
`Icon` : If the adornment is an icon.
`Touchable` : If the adornment is touchable.”
Object: The layout where to add the TextField Component.
Object: The pointer event object.
function()
function( text )
function( event )
function( focus )
tfd.absHeight
Returns the absolute height of the control in pixels.
tfd.absLeft
Returns the absolute distance of the control from the left in pixels.
tfd.absTop
Returns the absolute distance of the control from the top in pixels.
tfd.absWidth
Returns the absolute width of the control in pixels.
tfd.animate
Animate the component.
tfd.autoFocus
Sets or returns a boolean value whethe the input is focus when rendered into the DOM.
tfd.backColor
A hexadecimal color of the form #rrggbb
tfd.backImage
The path to your image file.
tfd.border
Sets or returns the border thickness in pixels.
tfd.borderColor
Sets or returns the border color. Color is in hexadecimal form #rrggbb
tfd.borderStyle
Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
tfd.bringForward
Bring this component forward by a given z-index.
tfd.color
Sets or returns the theme color of the textfield component.
tfd.cornerRadius
Sets or returns the corner radius in pixels.
tfd.destroy
Destroy the component.
tfd.disabled
Sets or returns the disabled state of the control.
tfd.el
Returns the html container element for the control.
tfd.elStyle
Sets the style of the html container element.
tfd.endAdornment
Returns the end adornment text or icon.
tfd.error
Sets or returns the error state of the TextField component.
tfd.focus
Sets focus on the textField component.
tfd.fontFile
Sets or returns the relative path to the font-family use.
tfd.getEndAdornment
Returns the end adornment text.
tfd.getPosition
Returns the position of the component. The return object is of the form {left, top, right, bottom}
tfd.getStartAdornment
Returns the start adornment text.
tfd.gone
Destroy the component.
tfd.height
Sets or returns the height of the control as a fraction of the parent control.
tfd.helperText
Sets or returns the helper text or the hint below the input.
tfd.hide
Hide the component.
tfd.hint
Sets or returns the hint text. It's the same as the placeholder property.
tfd.inputType
Sets or returns the input type. See type params for available values.
tfd.isVisible
Returns whether the control is visible or not.
tfd.label
Sets or returns the label text.
tfd.labelColor
Sets return the label color in hexadecimal format #rrggbb
tfd.left
Returns the distance of the control from the left.
tfd.margins
Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
tfd.maxRows
Sets or returns the maximum rows for a multiline textfield.
tfd.minRows
Sets or returns the minimum rows for a multiline textfield.
tfd.opacity
Sets or returns the opacity of the control.
tfd.options
Sets or returns the options of the control.
tfd.outlineColor
Sets or returns the outline color in hexadecimal form #rrggbb when the textfield is focus.
tfd.padding
Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
tfd.parent
Returns the parent layout control.
tfd.placeholder
Sets or returns the placeholder text.
tfd.position
Returns the position of the control. The returned object has left top right and bottom props.
tfd.required
Sets or returns a boolean value whether the text field in required or not.
tfd.rotation
Sets or returns the angle of rotation in degrees.
tfd.sendBackward
Bring this component backward by a given z-index.
tfd.setBorder
Sets the border line for the component container.
tfd.setCornerRadius
Sets the corner radius of the component.
tfd.setEndAdornment
Add an end adornment control into the TextField Component.
tfd.setEndAdornmentOnTouch
Add a callback handler when the end adornment control is touch.
tfd.setMargins
Sets the margin of the component.
tfd.setOnChange
Sets a callback function on values changes event.
tfd.setOnContextMenu
Adds a callback function on right click.
tfd.setOnEnter
Sets a callback function on enter or submit event.
tfd.setOnFocus
Adds a callback function when the textfield is focus or blur.
tfd.setPadding
Sets the padding of the component's container.
tfd.setPosition
Sets the position of the component relative to its parent dimensions.
tfd.setRows
Sets the minimum and maximum number of rows on a multiline type TextField.
tfd.setScale
Sets the x and y scaling of the component. This will ignore the positioning and flow of controls in the layout.
tfd.setSize
Sets the size of the component.
tfd.setStartAdornment
Set a start adornment control into the TextField Component.
tfd.setStartAdornmentOnTouch
Add a callback handler when the start adornment control is touch.
tfd.show
Show the component.
tfd.sizeVariant
Sets or returns the size variant of the textfield. Values can be Small or Medium
tfd.startAdornment
Returns the start adornment text or icon.
tfd.stepIncrement
Sets or returns the step increment if the input is of type number;
tfd.text
Sets or returns the text value of the TextField Component.
tfd.textColor
Sets or returns the color of the text.
tfd.textSize
Sets or returns the size of the text within the control.
tfd.top
Returns the distance of the control from the top.
tfd.type
Returns the type of the control.
tfd.variant
Sets or returns the variant of the TextField. Values can be Standard Filled or Outlined
tfd.visibility
Sets or returns the visibility of the control.
tfd.width
Sets or returns the width of the control as a fraction of the parent control.