FloatingLabelTextField.qml

import bb.cascades 1.2

Container {
    property string text: ""
    property string hint: ""
    property variant hintTextColor: Color.Gray
    property variant hintTextFocusColor: Color.create("#47BEE6")
    property variant inputMode: TextFieldInputMode.Default

    id: floating
    layout: DockLayout {
    }

    Container {
        topPadding: 35

        TextField {
            id: inputField
            text: floating.text
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            hintText: floating.hint
            inputMode: floating.inputMode

            onFocusedChanged: hintLabel.textStyle.color = focused ? floating.hintTextFocusColor : floating.hintTextColor
            onTextChanging: hintLabel.visibility = text.length > 0
        }
    }
    Container {
        leftPadding: 20

        Label {
            property bool visibility: inputField.text.length > 0

            id: hintLabel
            text: floating.hint
            textStyle {
                fontSize: FontSize.Small
                color: floating.hintTextColor
            }
            animations: [
                ParallelAnimation {
                    id: visibleAnimation

                    FadeTransition {
                        duration: 50
                        fromOpacity: 0
                        toOpacity: 1
                    }
                    TranslateTransition {
                        duration: 150
                        fromY: 15
                        toY: 0
                    }

                    onStarted: hintLabel.visible = true
                },
                ParallelAnimation {
                    id: invisibleAnimation

                    TranslateTransition {
                        duration: 150
                        fromY: 0
                        toY: 15
                    }
                    FadeTransition {
                        delay: 100
                        duration: 50
                        fromOpacity: 1
                        toOpacity: 0
                    }

                    onEnded: hintLabel.visible = false
                }
            ]

            onCreationCompleted: hintLabel.visible = floating.text.length > 0
            onVisibilityChanged: {
                if (visibility) {
                    visibleAnimation.play();
                } else {
                    invisibleAnimation.play();
                }
            }
        }
    }
}

main.qml

import bb.cascades 1.2

Page {
    Container {
        leftPadding: 15
        rightPadding: 15

        FloatingLabelTextField {
            hint: "E-Mail"
        }
        FloatingLabelTextField {
            hint: "Password"
            inputMode: TextFieldInputMode.Password
        }
        Divider {
        }
        FloatingLabelTextField {
            hint: "Firstname"
        }
        FloatingLabelTextField {
            hint: "Lastname"
        }
    }
}