Material-like floating placeholder text transition mockup in QML. Buggy as hell, bit it gets the point.

placeholder

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2

Window {
  title: qsTr("Hello World")
  width: 640
  height: 480

  TextField {
    id: user
    placeholderText: "User name or email"
    anchors.centerIn: parent

    style: TextFieldStyle {
      background: Rectangle {
        height: Math.max(30, Math.round(control.__contentHeight * 1.5))

        Text {
          id: floatingPlaceholder

          anchors.top: parent.top
          anchors.left: parent.left
          anchors.topMargin: 4
          anchors.leftMargin: 6
          transformOrigin: Item.TopLeft
          visible: false
          color: placeholderTextColor

          states: [
            State {
              name: "shown"
              when: control.text.length !== 0
              PropertyChanges { target: floatingPlaceholder; scale: 0.6 }
              PropertyChanges { target: floatingPlaceholder; anchors.topMargin: 0 }
            }
          ]

          transitions: [
            Transition {
              to: "shown"
              SequentialAnimation {
                PropertyAction { target: floatingPlaceholder; property: "text"; value: control.placeholderText }
                PropertyAction { target: floatingPlaceholder; property: "visible"; value: true }
                PropertyAction { target: control; property: "placeholderText"; value: "" }
                ParallelAnimation {
                  NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                  NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                }
              }
            },
            Transition {
              from: "shown"
              SequentialAnimation {
                ParallelAnimation {
                  NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                  NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                }
                PropertyAction { target: control; property: "placeholderText"; value: floatingPlaceholder.text }
                PropertyAction { target: floatingPlaceholder; property: "visible"; value: false }
              }
            }
          ]
        }
      }
    }
  }
}

i made a little changes to this code :

TextField{
    property string hintText : ""
    height: parent.height
    id:field
    Text{
        id:placeholdersection
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        text: hintText
        color:"gray"
    }
    Text{
        text: hintText
        id: floatingPlaceholder
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 4
        anchors.leftMargin: 6
        transformOrigin: Item.TopRight
        color: placeholderTextColor
        visible: false
        states: [
            State {
                name: "shown"
                when: field.text.length != 0
                PropertyChanges { target: floatingPlaceholder; scale: 0.6 }
                PropertyChanges { target: floatingPlaceholder; anchors.topMargin: -25 }
            }
        ]

        transitions: [
            Transition {
                to: "shown"
                SequentialAnimation {
                    PropertyAction { target: floatingPlaceholder; property: "visible"; value: true }
                    PropertyAction {target:placeholdersection; property:"visible"; value : false }
                    ParallelAnimation {
                        NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                        NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                    }
                }
            },
            Transition {
                from: "shown"
                SequentialAnimation {
                    ParallelAnimation {
                        NumberAnimation { target: floatingPlaceholder; property: "scale"; duration: 250; easing.type: Easing.InOutQuad }
                        NumberAnimation { target: floatingPlaceholder; property: "anchors.topMargin"; duration: 250; easing.type: Easing.InOutQuad }
                    }
                    PropertyAction { target: floatingPlaceholder; property: "visible"; value: false }
                    PropertyAction { target: placeholdersection ; property :"visible"; value : true }
                }
            }
        ]
    }
}