Customize Textfield

[A Former User]

Hello guys I want make text input like image. Everything is but I don't set placeholder text. How can I set the placeholder on top like image?

[A Former User]

Have idea ?

[J.Hilk]

@NullByte said in Customize Textfield:

Have idea ?

TextField has a placeHolderText property, did you set that to a value ?

https://doc.qt.io/qt-5/qml-qtquick-controls-textfield.html#placeholderText-prop

[A Former User]

Thank you but that's not the problem. How can I show the placeholder on top like in the photo?

[lemons]

@NullByte
you could do something like this:

TextField {
    id: textField
    anchors.centerIn: parent
    focus: false
    width: 150
    height: 40
    text: ""
    color: "#2C2E35"
    // hide placeholder inside input as soon as it gets focus
    placeholderTextColor: textField.activeFocus ? "transparent" : "#AAAAAA"
    placeholderText: "Parola"
    leftPadding: 10
    rightPadding: 10
    topPadding: 5
    bottomPadding: 5
    background: Rectangle {
        color: "transparent"
        radius: 15
        border.width: 2
        border.color: textField.activeFocus ? "#80BBB6" : "#AAAAAA"
        
        // overlay for border line where label should go
        Rectangle {
            visible: textField.activeFocus
            // if background behind input is other than white, apply it here
            color: "white"
            anchors.top: parent.top
            anchors.left: parent.left
            // move it outside the rounded border
            anchors.leftMargin: parent.radius
            width: childrenRect.width
            height: parent.border.width
            
            // the actual label on the border
            Text {
                // add some spacings beside the label
                padding: 5
                anchors.verticalCenter: parent.verticalCenter
                text: textField.placeholderText
                color: "#80BBB6"
            }
        }
    }
    cursorDelegate: Rectangle {
        visible: textField.cursorVisible
        color: "#80BBB6"
        width: textField.cursorRectangle.width
    }
}