Qt World Summit: Register Today!

How to make tab navigation between textboxes?

  • I have a QML component (or whatever it is, just a file with Item in root) with border and TextInput, basically a standard textbox.

    import QtQuick 2.7
    Item {
        id: textBox
        clip: true
        property alias  inputText:       inputText.text
        property alias  mode:            inputText.echoMode
        property color  borderColor:     "gray"
        property int    borderWidth:     1
        Rectangle {
            id: rectInput
            anchors.fill: parent
            border.color: borderColor
            border.width: borderWidth
            radius:       4
        TextInput {
            id: inputText
            anchors.fill:       parent
            anchors.leftMargin: 3
            verticalAlignment:  Text.AlignVCenter
            selectByMouse:      true

    I have a form with 2 of these components.

    GridLayout {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 400
        columns: 2
        rowSpacing: 10
        Text {
            id: textName
            clip: true
            text: "Name: "
        TextBox {
            id: tboxName
            Layout.fillWidth: true
            height: 30
            KeyNavigation.tab: tboxPassword
        Text {
            id: textPassword
            clip:  true
            text: "Password: "
        TextBox {
            id: tboxPassword
            Layout.fillWidth: true
            height: 30
            mode: TextInput.Password

    How to make tab navigation between them? I tried to add KeyNavigation.tab but no effect.

    btw does QML/Qt Quick really doesn't have any default tab handling between interactable components? So we have to always specify tabs manually?

  • use forceActiveFocus(),

    This method sets focus on the item and ensures that all ancestor FocusScope objects in the object hierarchy are also given focus.

    The reason for the focus change will be Qt::OtherFocusReason. Use the overloaded method to specify the focus reason to enable better handling of the focus change.

Log in to reply