Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

AppTextField

A single-line TextField input control. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.7.0
Inherits:

TextField

Properties

Signals

Detailed Description

AppTextField is an extension of the basic QML TextField for getting single-line text input from the user.

It implements a default TextFieldStyle to add platform-specific styling.

How do I set a placeholder for the text field?

Input controls like AppTextInput or AppTextField, which extends the QML TextField type, own a placeholderText property, which you can use for your placeholder text.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Page {

     // remove focus from textedit if background is clicked
     MouseArea {
       anchors.fill: parent
       onClicked: textEdit.focus = false
     }

     // background for input
     Rectangle {
       anchors.fill: textEdit
       anchors.margins: -dp(8)
       color: "lightgrey"
     }

     // input
     AppTextField {
       id: textEdit
       width: dp(200)
       placeholderText: "What's your name?"
       anchors.centerIn: parent
     }
   }
 }

How do I show validation errors?

The text input components provide predefined validators that you can use, they are called inputMethodHints.

You can also add custom validators to restrict the accepted input to a certain input type or expression. Input that does not match the validator is not accepted. To do custom validations and show errors for accepted input, you can add simple checks and control the visibility of errors with property bindings:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // background for input
   Rectangle {
     anchors.fill: textInput
     anchors.margins: -dp(8)
     color: "lightgrey"
   }

   // input
   AppTextField {
     id: textInput
     width: dp(200)
     placeholderText: "What's your name?"
     anchors.centerIn: parent

     // only allow letters and check length
     validator: RegExpValidator {
       regExp: /[A-Za-z]+/
     }
     property bool isTooLong: textInput.text.length >= 6
   }

   // show error if too long
   AppText {
     text: "Error: Use less than 6 letters."
     color: "red"
     anchors.top: textInput.bottom
     anchors.topMargin: dp(16)
     anchors.left: textInput.left
     visible: textInput.isTooLong
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Property Documentation

backgroundColor : color

The background color of the text field. If the background is transparent and the text field's borderWidth is 0, the control uses a native look on Android.

The default value for Android is transparent, otherwise it is Theme::backgroundColor.


borderColor : color

The color of the text field's border.

The default value is Theme::dividerColor.


borderWidth : real

The width of the text field's border. If the text field has no border and the backgroundColor is transparent, the control uses a native look on Android.

The default value is 0.


clearsOnBeginEditing : bool

If set to true, the text field's current text is cleared when the user selects the text field to begin editing. If false, the text field places an insertion point at the place where the user tapped the field.

The default value is false.

This property was introduced in Felgo 2.7.0.


clickEnabled : bool

This property is used for text fields without manual input. When the user selects this text field, the clicked signal is fired instead of setting focus to the text field. This makes sense e.g. for date input fields, where you can show a date picker when the field is selected.

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppTextField::clickEnabled"

       AppTextField {
         id: textField
         width: parent.width
         placeholderText: "Select date"
         clickEnabled: true
         onClicked: {
           nativeUtils.displayDatePicker()
         }

         Connections {
           target: nativeUtils
           onDatePickerFinished: {
             if(accepted) textField.text = date
           }
         }
       }
     }
   }
 }

The default value is false.

This property was introduced in Felgo 3.3.0.


cursorColor : color

The color of the cursor that marks the current position in the text field. Matches Theme::inputCursorColor by default.

This property was introduced in Felgo 2.7.0.


inputMode : int

You can use a set of predefined input modes for different types of text fields:

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppTextField::inputMode"

       AppTextField {
         width: parent.width
         inputMode: inputModeEmail
       }
     }
   }
 }

The default value is inputModeDefault.

This property was introduced in Felgo 3.3.0.


passwordVisible : bool

Set this to display the password instead of showing disc characters. This only has an effect if the text field is used with inputModePassword.

This property is also used by the show password button, which can be enabled/disabled using showPasswordVisibleButton.

The default value is false.

This property was introduced in Felgo 3.3.0.


placeholderColor : color

The color for the placeholder text that is displayed when the field is empty.

The default value is Theme::placeholderTextColor.


radius : real

The Rectangle::radius of the background.

The default value is 0.


showClearButton : bool

If set to true, a clear button is displayed at the right side of the text field as soon as the text field has contents, as a way for the user to remove the current text.

The default value is false.

This property was introduced in Felgo 2.7.0.


showPasswordVisibleButton : bool

This property is used to show a button to display the password instead of showing disc characters.

The default value is true if the text field is used with inputModePassword, else false.

This property was introduced in Felgo 3.3.0.


textColor : color

An alias to the color property of the inherited TextField.

The default value is Theme.colors.textColor.


Signal Documentation

clicked()

This signal is fired if the text field uses clickEnabled and is selected.

This signal was introduced in Felgo 3.3.0.