TextField

Register on Lenra

Element of type TextField

textfield

This component gives the possibility to the user to write text.

Examples

Basic textfield

{
    "type": "textfield", 
    "value": "fixedValue",
    "onChanged": {
        // This listener cannot change the value because the value is fixed to "fixedValue"
        "action": "changeValue"
    }
}

Complex textfield

{
    "type": "textfield",
    // The value is stored in the app data
    "value": data,
    "style": {
        "decoration": {
            "icon": {
                "type": "icon",
                "value": "star",
            },
            "filled": true,
            "fillColor": 0xFFBBDEFB,
            "border": {
                "type": "outline",
            },
            "hintText": "hint",
            "helperText": "helper",
            "labelText": "label",
            // Showing the string length under the textfield
            "counterText": "${data.length}"
        },
    },
    "minLines": 3,
    "maxLines": 5,
    // This listener takes care of changing the value in the app data
    "onChanged": {"code": "CodeA"}
},

Properties

AttributeDescriptionType
typeThe type of the elementstring ("textfield")
valueThe value displayed inside the Textfieldstring
autocorrectWhether to enable the autocorrectionboolean
autofillHintsThe type of this text input to provide autofill hints.array[]
autofocusWhether this Textfield should be focused initially.boolean
buildCounterCallback that generates a custom counter widget.Basic Listener
dragStartBehaviorDetermines the way that drag start behavior is handled.string ("start", "down")
enabledWhether the text field is enabled.boolean
enableInteractiveSelectionWhether to enable user interface options to change the text selection.boolean
expandsWhether the TextField is sized to fill its parent.boolean
keyboardTypeThe type of the keyboard to use for editing the text.textInputType
maxLengthThe maximum number of characters to allow in the text field.integer
maxLengthEnforcementDetermines how the maxLength limit should be enforced.string ("none", "enforced", "truncateAfterCompositionEnds")
maxLinesThe maximum number of lines to show at one time.integer
minLinesThe minimum number of lines to occupy on the screen.integer
nameThe name that will be used in the form.string
obscureTextWhether to hide the text being edited.boolean
onAppPrivateCommandThis is used to receive a private command from the input method.Basic Listener
onChangedCallback when the user changes the text field value.Basic Listener
onEditingCompleteCallback when the user finishes editing the text field.Basic Listener
onSubmittedCallback when the user tells he is done editing the text field.Basic Listener
onTapCallback when the user taps on the text field.Basic Listener
readOnlyWhether the text can be changed.boolean
showCursorWhether to show the cursor.boolean
styleThe style of the Textfield.TextFieldStyle
textCapitalizationConfigures how the platform keyboard will select an uppercase or lowercase keyboard.string ("none", "words", "sentences", "characters")
textDirectionThe direction of the text.string ("ltr", "rtl")
textInputActionThe type of the action button to use for the keyboard.string ("continueAction", "done", "emergencyCall", "go", "join", "newline", "next", "none", "previous", "route", "search", "send", "unspecified")
toolbarOptionsConfiguration of toolbar optionstoolbarOptions