Sailfish OS
  • Info
  • User Experience
  • Cases
  • Community
  • Developers
  • Contact
  • Get Sailfish OS
Select Page
  • Info
  • User Experience
  • Cases
  • Community
  • Developers
  • Contact
  • Get Sailfish OS

API Documentation

Documentation for developing SailfishOS applications
  • API Documentation
  • Libsailfishapp
  • Sailfish Silica
    • Documentation
    • Icon Reference
  • Sailfish Components
    • Sailfish Accounts
    • Sailfish Bluetooth
    • Sailfish Contacts
    • Sailfish Crypto
    • Sailfish Gallery
    • Sailfish Media
    • Sailfish Pickers
    • Sailfish Secrets
    • Sailfish Share
    • Sailfish Telephony
    • Sailfish Webview
    • Amber Web Authorization
    • Amber MPRIS
  • Nemo QML Plugins
    • Configuration
    • Contacts
    • D-Bus
    • Keepalive
    • Notifications
    • Thumbnailer
  • Sailfish Middleware
    • MDM Framework
    • MDM Policy Framework
    • User Manager Daemon
  • API Documentation
  • Libsailfishapp
  • Sailfish Silica
    • Documentation
    • Icon Reference
  • Sailfish Components
    • Sailfish Accounts
    • Sailfish Bluetooth
    • Sailfish Contacts
    • Sailfish Crypto
    • Sailfish Gallery
    • Sailfish Media
    • Sailfish Pickers
    • Sailfish Secrets
    • Sailfish Share
    • Sailfish Telephony
    • Sailfish Webview
    • Amber Web Authorization
    • Amber MPRIS
  • Nemo QML Plugins
    • Configuration
    • Contacts
    • D-Bus
    • Keepalive
    • Notifications
    • Thumbnailer
  • Sailfish Middleware
    • MDM Framework
    • MDM Policy Framework
    • User Manager Daemon

Contents

  • Properties
  • Signals
  • Methods
  • Detailed Description
  • Text input validation

TextField QML Type

Displays a single line of editable plain text More...

Import Statement: import Sailfish.Silica 1.0
Inherited By:

PasswordField and SearchField

  • List of all members, including inherited members

Properties

  • acceptableInput : bool
  • autoScrollEnabled : bool
  • background : Component
  • backgroundStyle : enumeration
  • color : color
  • cursorPosition : int
  • description : string
  • echoMode : enumeration
  • errorHighlight : bool
  • font.bold : bool
  • font.capitalization : enumeration
  • font.family : string
  • font.italic : bool
  • font.letterSpacing : real
  • font.pixelSize : int
  • font.pointSize : real
  • font.strikeout : bool
  • font.underline : bool
  • font.weight : enumeration
  • font.wordSpacing : real
  • horizontalAlignment : enumeration
  • inputMethodHints : Qt::InputMethodHints
  • label : string
  • labelVisible : bool
  • leftItem : Item
  • placeholderColor : string
  • placeholderText : string
  • readOnly : bool
  • rightItem : Item
  • selectedText : string
  • selectionEnd : int
  • selectionMode : enumeration
  • selectionStart : int
  • softwareInputPanelEnabled : bool
  • strictValidation : bool
  • text : string
  • textLeftMargin : real
  • textMargin : real
  • textRightMargin : real
  • textVerticalCenterOffset : real
  • validator : Validator
  • wrapMode : enumeration

Signals

  • onClicked(variant mouse)
  • onPressAndHold(variant mouse)

Methods

  • copy()
  • cut()
  • deselect()
  • forceActiveFocus()
  • paste()
  • int positionAt(x, y)
  • rect positionToRectangle(int position)
  • select(int start, int end)
  • selectAll()
  • selectWord()

Detailed Description

The TextField type provides a display for a single line of editable plain text.

Here is a simple text field:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 TextField {
     focus: true
     text: "A single line of text"
 }

The label text is displayed below the input area when text is not empty, providing context for the text field. The convention typically used is:

 TextField {
     label: "Username"
 }

A text field can initially display some text that will automatically disappear once text is entered into the text field. This placeholder text is set through the placeholderText property:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 TextField {
     label: "Username"
     placeholderText: "Username"
 }

By default placeholderText follows the value of label text so defining label is enough in most cases.

A TextField item can only display plain text. To display rich formatted text, use TextArea instead.

Text input validation

A text field may disallow the entry of particular characters through the use of validators. For example, the RegExpValidator below ensures that only digits or characters from a specific set may be entered. Additionally, the user should enter a minimum of six characters. (While the field does not erase its text if a smaller number of characters are entered, it will set its errorHighlight property to true, and this may be used to indicate that the field is not valid.)

In contrast to the QML TextInput element, the Silica TextField by default allows the user to enter invalid characters into the TextField. However, any TextField that contains invalid input will still be considered invalid and still be error highlighted.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 TextField {
     placeholderText: "Phone number"
     validator: RegExpValidator { regExp: /^[0-9\+\-\#\*\ ]{3,}$/ }
     inputMethodHints: Qt.ImhNoPredictiveText
 }

Note for many cases it is easier to define the validation rule as a simple JavaScript expression than try to come up with the right kind of validator.

 import Sailfish.Silica 1.0

 TextField {
     acceptableInput: text.length > 6
 }

Regular expressions can also be used to define validation patterns, either using Qt's RegExpValidator or using JavaScript RegExp object.

 import Sailfish.Silica 1.0

 TextField {
     property var regExp: new RegExp(/^[0-9\+\-\#\*\ ]{3,}$/)
     acceptableInput: regExp.test(text)
 }

Also note that the validator instance does not consider the preedit text i.e. the underlined current word or character being composed for non-latin scripts (until it eventually gets committed). In comparison text property includes preedit text.

Password-style entry, where entered characters should not be displayed, can be enabled by setting echoMode to TextInput.Password.

See also TextArea.

Property Documentation

[read-only] acceptableInput : bool

Indicates whether the validator accepts the current text value. If you don't use validator the value can be overridden with a custom validation binding.

 import Sailfish.Silica 1.0

 TextField {
     acceptableInput: text.length > 6
 }

This is true if no validator has been set.

See also validator.


autoScrollEnabled : bool

Holds whether the text field will automatically scroll the Flickable that contains it to ensure visibility, when the text field gains active focus and when input is provided.

The default is true.


background : Component

The Component to use to draw the background of the text field.


backgroundStyle : enumeration

Style to use for the editor background.

Possible values

  • TextEditor.UnderlineBackground - The text editor is rendered with an underline.
  • TextEditor.FilledBackground - The text editor is rendered with a filled background.
  • TextEditor.NoBackground - No background is rendered for the editor.

The default value is underlined background.


color : color

The color of the text.


cursorPosition : int

The character position of the cursor within the text.

The value ranges from 0 to the number of characters in text.


description : string

A longer text to display below the label, e.g. hint text or error message that provides some additional detail on what kind of input is expected.

The default value is an empty string.

See also text, label, and placeholderText.


echoMode : enumeration

Controls how entered text is displayed. This is one of:

  • TextInput.Normal - displays all text as entered (the default value)
  • TextInput.Password - displays asterisks in place of entered text
  • TextInput.PasswordEchoOnEdit - displays text as entered when the item has active focus and the text is being modified; otherwise, displays asterisks in place of entered text
  • TextInput.NoEcho - entered text is not displayed

errorHighlight : bool

True if the text field should be highlighted to indicate that the current text input is invalid.

This defaults to the inverse value of acceptableInput, except when the user hasn't modified the content of the TextField yet.


font.bold : bool

True if the displayed text is rendered in bold, otherwise false.


font.capitalization : enumeration

Holds the capitalization formatting that is applied to the displayed text. This is one of:

  • Font.MixedCase - no capitalization is applied (the default value)
  • Font.AllUppercase - all text is rendered in uppercase
  • Font.AllLowercase - all text is rendered in lowercase
  • Font.SmallCaps - text is rendered in small caps
  • Font.Capitalize - the first letter of each word is rendered with a capital letter

font.family : string

The name of the font family for rendering the displayed text.


font.italic : bool

True if the displayed text is rendered in italics, otherwise false.


font.letterSpacing : real

Controls the spacing (in pixels) between letters in the displayed text.

Specifying a positive value increases the default spacing between letters, and specifying a negative value decreases this spacing.


font.pixelSize : int

The size of the displayed text, in pixels.


font.pointSize : real

The size of the displayed text, in points.


font.strikeout : bool

True if the displayed text is rendered with a strikeout style, otherwise false.


font.underline : bool

True if the displayed text is rendered with an underline, otherwise false.


font.weight : enumeration

Holds the weight value for rendering the displayed text.

This is one of the following (listed from lightest to heaviest):

  • Font.Light
  • Font.Normal (the default value)
  • Font.DemiBold
  • Font.Bold
  • Font.Black

font.wordSpacing : real

Controls the spacing (in pixels) between words in the displayed text.

Specifying a positive value increases the default spacing between words, and specifying a negative value decreases this spacing.


horizontalAlignment : enumeration

The horizontal alignment of the text within the text field's width and height.

By default, the text alignment follows the natural alignment of the text, for example text that is read from left to right will be aligned to the left.

Valid values are:

  • TextInput.AlignLeft (default)
  • TextInput.AlignRight
  • TextInput.AlignHCenter
  • TextInput.AlignJustify

When using the attached property LayoutMirroring::enabled to mirror application layouts, the horizontal alignment of text will also be mirrored. However, the property horizontalAlignment will remain unchanged. To query the effective horizontal alignment of TextField, use the property LayoutMirroring::enabled.


inputMethodHints : Qt::InputMethodHints

Holds the hints to the input panel about the nature of the input this field expects. The input panel will display an input method suitable for the hints provided. The hints may be OR'ed together:

 TextField {
     inputMethodHints: Qt.ImhEmailCharactersOnly | Qt.ImhNoPredictiveText
 }

The supported input method hints are:

  • Qt.ImhDialableCharactersOnly - Phone numbers
  • Qt.ImhDigitsOnly - Integer numbers
  • Qt.ImhEmailCharactersOnly - Email field
  • Qt.ImhFormattedNumbersOnly - Decimal numbers
  • Qt.ImhNoPredictiveText - Disable prediction
  • Qt.ImhUrlCharactersOnly - Web address
  • Qt.ImhNoAutoUppercase - Disable switch to uppercase at beginning of sentences

See also softwareInputPanelEnabled.


label : string

Text to display below the text entry field when text is not empty. This is useful for providing a description of the information to be entered in the text field. It is typically used in conjunction with placeholderText.

The default value is an empty string.

See also text, placeholderText, description, and labelVisible.


labelVisible : bool

Holds whether the label text will be displayed below the input field when text is not empty.

Setting to false hides the label and releases the space reserved for the label.

The default value is true.

See also label.


leftItem : Item

Use leftItem to inject an item to the left side of the displayed text. The most common use case is to add an icon that helps user identify the field

Note the left item is vertically centered to the one-line text field, where as the right item is vertically centered to the first line of the visible text.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 TextField {
     label: "Email"
     leftItem: Icon {
         source: "image://theme/icon-m-mail"
     }
 }

placeholderColor : string

The color of the placeholderText.

By default, the color is Theme.secondaryHighlightColor when the text field has active focus, and Theme.secondaryColor otherwise.

See also placeholderText.


placeholderText : string

The text to be displayed when text is empty. This is useful for providing an indication of the information to be entered in the text field. It is typically used in conjunction with label.

By default the placeholder text value follows label text value.

See also text, placeholderColor, label, and description.


readOnly : bool

Holds whether the text field is in read-only mode.

If set to true, the user cannot edit the text.


rightItem : Item

Use rightItem to inject an item to the right side of the displayed text. The most common use case is to introduce an action (e.g. clear text, show password, etc.) as an icon button next to the field.

Note the right item is vertically centered to the first line of the visible text, where as as the left item is vertically centered to the one-line text field.

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 TextField {
     id: clearableField
     rightItem: IconButton {
         onClicked: clearableField.text = ""

         width: icon.width
         height: icon.height
         icon.source: "image://theme/icon-m-input-clear"
         opacity: clearableField.text.length > 0 ? 1.0 : 0.0
         Behavior on opacity { FadeAnimation {} }
     }
 }

If you haven't defined the right item and set errorHighlight to true the property will implicitly be changed to display an error icon.


selectedText : string

The text that is currently selected.


selectionEnd : int

The position of the end of the selected text.

This is a readonly property. The user can modify the selection by double tapping the text and moving the handles. The selection can be set programmatically via the select(), selectAll() or selectWord() functions.

See also select() and selectedText.


selectionMode : enumeration

Holds how text should be selected when dragging a selection handle. This is one of:

  • TextInput.SelectCharacters - The selection is updated character by character. (Default)
  • TextInput.SelectWords - The selection is updated word by word.

selectionStart : int

The position of the start of the selected text.

This is a readonly property. The user can modify the selection by double tapping the text and moving the handles. The selection can be set programmatically via the select(), selectAll() or selectWord() functions.

See also select() and selectedText.


softwareInputPanelEnabled : bool

Holds whether the on-screen key input panel is displayed when the text field gains active focus.

The default is true.


strictValidation : bool

Toggles the default Qt validation behaviour. When true, users can't type any characters that the validator considers invalid. When false, the TextField will show error, but allow the user to input invalid characters. Strict validation is often too restrictive, blocking text composition, text prediction and clipboard paste even if one character is wrong.

The default value is false.


text : string

The displayed text. Contrary to Qt text editors includes preedit text.


textLeftMargin : real

The margin to the left of the displayed text, within the bounds of the text field.

By default this follows textMargin, but also takes the width of leftItem if defined into account. The left item needs to have non-zero opacity to be counted in the default value.


textMargin : real

The margin to the left and the right of the displayed text, within the bounds of the text field.

This can be overridden by textLeftMargin and textRightMargin.


textRightMargin : real

The margin to the right of the displayed text, within the bounds of the text field.

By default this follows textMargin, but also takes the width of rightItem if defined into account. The right item needs to have non-zero opacity to be counted in the default value.


[read-only] textVerticalCenterOffset : real

The vertical offset from top of the text field to the center of the actual editor element. This property can be used for centering e.g. an icon with the editor element:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Page {
     TextField {
         id: textField
     }

     Image {
         anchors {
             left: textField.right
             verticalCenter: textField.top
             verticalCenterOffset: textField.textVerticalCenterOffset
         }
     }
 }

validator : Validator

The object that validates any entered text. By default, a text field does not have a validator.

A validator is used to detect if user attempts to input unacceptable text. For example, the IntValidator below ensures that the user may only enter a number between 1-10 into the text field:

 import QtQuick 2.6
 import Sailfish.Silica 1.0

 TextField {
     placeholderText: "Single digit"
     validator: IntValidator { bottom: 0; top: 9 }
 }

See also acceptableInput and strictValidation.


wrapMode : enumeration

Holds the mode used to wrap the text to the width of the text field. The text will only wrap if an explicit width has been set.

  • TextInput.NoWrap - no wrapping will be performed. If the width of the text goes over the width of the text field the user needs to scroll the field to see the truncated parts. Wrapping is recommended as then user can often see the text in full.
  • TextInput.WordWrap - wrapping is done on word boundaries only. If a word is too long, implicitWidth will exceed a set width.
  • TextInput.WrapAnywhere - wrapping is done at any point on a line, even if it occurs in the middle of a word.
  • TextInput.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word.

The default is TextInput.NoWrap.


Signal Documentation

onClicked(variant mouse)

This signal handler is called when the text field is clicked. The mouse parameter provides information about the click.


onPressAndHold(variant mouse)

This signal handler is called when there is a long press on the text field. The mouse parameter provides information about the press.


Method Documentation

copy()

Copies the currently selected text and places it in the clipboard.

See also select() and paste().


cut()

Removes the currently selected text and places it in the clipboard.

See also select() and paste().


deselect()

Removes the text selection. The text remains unchanged.

See also select().


forceActiveFocus()

Forces active focus on the text field.

When an item has Item::activeFocus, it becomes the item that receives keyboard input.


paste()

If there is a selection then the selection will be replaced with the contents of the clipboard; otherwise inserts the contents of the clipboard into the text at the cursorPosition.


int positionAt(x, y)

Returns the character position closest to the point at (x, y).


rect positionToRectangle(int position)

Returns a rectangle of the geometry where the cursor position would be if it was placed at the specified character position.


select(int start, int end)

Selects the text from start to end.

If either start or end is out of range, the selection is not changed.

After calling select(), selectionStart will become the lesser and selectionEnd will become the greater (regardless of the order passed to this method).

See also selectionStart, selectionEnd, and selectedText.


selectAll()

Selects all of the text.

See also select().


selectWord()

Selects the word nearest the cursorPosition.

See also select().


  • Legal
  • Contact Us
  • Jolla Mobile Ltd © 2025

  • Facebook
  • Twitter
  • Mastodon
  • YouTube
  • LinkedIn