Lenra Docs
Register on Lenra
  • Home
  • Getting started
  • Guides
  • Features
  • References
  • Contribute


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


    Basic textfield

    The onChanged event will be triggered if the user type (or remove) some text in the field. So you can save it to your data and react to any user input later.

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

    Complex textfield

    Like some other components (container, ...), textfield allow you to change its style using the decoration property. But as you can see, it's really easy to react to the user input on the fly.

        "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"}


    _typeThe type of the element
    • 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 view.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.Listener
    onChangedCallback when the user changes the text field value.Listener
    onEditingCompleteCallback when the user finishes editing the text field.Listener
    onSubmittedCallback when the user tells he is done editing the text field.Listener
    onTapCallback when the user taps on the text field.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