Skip to main content

TextField

The TextField widget is an input box where users type text. Use it for search terms, names, passwords, and any other text input.

info

Example file: 07_Work_with_Widgets/textfield_objet.lfp

Definition and role

The TextField widget draws an area where users type text with the keyboard. When the text changes it runs onChanged, and when the user submits it runs onSubmitted. Configure decoration such as hint text and borders, the keyboard type, the maximum character count, and password obscuring.

  • Category: Contents

Features

FeatureDescription
Text inputUsers type characters with the keyboard, and actions run when the text changes or is submitted.
Input decorationSet the look of the input box — hint text, label, borders — with decoration.
Input controlSet the keyboard type, maximum character count, multi-line input, read-only mode, and password obscuring.
Script controlRead and write the text from a script, move focus, and measure the text width.

How to use

  1. Open the Contents category in the left widget palette.
  2. Drag and drop the TextField item onto the canvas.
  3. Set the look — hint text, borders, and more — in decoration.
  4. Connect the actions you want to run to events such as onChanged (the text changed) or onSubmitted (the user submitted).
  5. If needed, adjust the keyboard type (keyboardType), the maximum character count (maxLength), and password obscuring (obscureText).

Properties

note

The table below lists the top-level properties you see as soon as you expand the Properties panel. Group properties like decoration and style hold more options when expanded; only the top-level entries are covered here.

PropertyDescriptionDefaultValue / Type
textEntered textEmpty stringString
focusNodeFocus node for the input boxNot setFocus node
decorationInput decoration (hint, label, border, and more)Not setInput decoration
keyboardTypeKeyboard typeNot setKeyboard type
textInputActionKeyboard action button (Done, Search, and so on)Not setKeyboard action
textCapitalizationAutomatic capitalizationnonenone, words, sentences, characters
styleText styleNot setText style
strutStyleStrut style, including line heightNot setStrut style
textAlignText alignmentstartleft, right, center, justify, start, end
textAlignVerticalVertical alignment positionNot setNumber (-1.0 to 1.0)
textDirectionText directionNot setrtl, ltr
readOnlyRead-only (no input allowed)Off (false)True / False
howCursorHow the cursor is shown — has no effect in the current version.Off (false)True / False
showCursorWhether to show the cursorNot setTrue / False
autofocusFocus automatically when the screen opensOff (false)True / False
obscuringCharacterCharacter shown in place of obscured textCharacter
obscureTextObscure the input (password)Off (false)True / False
autocorrectAutocorrectOn (true)True / False
smartDashesTypeSmart dashes inputNot setdisabled, enabled
smartQuotesTypeSmart quotes inputNot setdisabled, enabled
enableSuggestionsInput suggestionsOn (true)True / False
maxLinesMaximum number of linesNot set (1 line)Integer
minLinesMinimum number of linesNot setInteger
expandsExpand to fill the parent's heightOff (false)True / False
maxLengthMaximum number of charactersNot set (no limit)Integer
maxLengthEnforcementHow input beyond the maximum length is handledNot setnone, enforced, truncateAfterCompositionEnds
inputFormattersList of input format restrictionsNot setList
enabledWhether the field is enabledNot set (enabled)True / False
cursorWidthCursor thickness2Number
cursorHeightCursor heightNot setNumber
cursorRadiusCorner radius of the cursorNot setRadius
cursorColorCursor colorNot setColor
selectionHeightStyleHow the height of the selection area is measuredtighttight, max, includeLineSpacingMiddle, includeLineSpacingTop, includeLineSpacingBottom, strut
selectionWidthStyleHow the width of the selection area is measuredtighttight, max
keyboardAppearanceKeyboard brightness themeNot setdark, light
scrollPaddingPadding kept clear while scrolling20Insets
dragStartBehaviorDrag start behaviorstartstart, down
enableInteractiveSelectionAllow selection (copy, paste, and so on)Not setTrue / False
mouseCursorMouse cursorNot setCursor
scrollControllerScroll controllerNot setScroll controller
scrollPhysicsHow scrolling behavesNot setScroll physics
autofillHintsList of autofill hintsNot set (empty list)List
clipBehaviorHow content outside the bounds is clippedhardEdgenone, hardEdge, antiAlias, antiAliasWithSaveLayer
restorationIdState restoration IDNot setString
scribbleEnabledEnable Scribble (pen input)On (true)True / False
enableIMEPersonalizedLearningEnable IME personalized learningOn (true)True / False

Notes and tips

tip

For a password field, turn on obscureText and, if needed, change the mask character with obscuringCharacter.

tip

For multi-line input, raise maxLines (and minLines), or turn on expands to fill the parent's height.

Learn more

tip

For the full set of Widget Control (Property, Method, Event) you can drive from a script, visit TextField Widget Control.