SwiftUI floating label textfield

FloatingLabelTextField.swift

// Because Label's size don't match, transition looks weird.

import SwiftUI

struct FloatingLabelTextField: View {
    @Namespace private var namespace

    let placeholder: String
    @Binding var text: String
    @State private var isTextFieldFirstResponder: Bool = false

    var showLabel: Bool {
        isTextFieldFirstResponder || !text.isEmpty
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ZStack {
                Text(placeholder)
                    .foregroundColor(Color(.systemBackground))
                if showLabel {
                    Text(placeholder)
                        .matchedGeometryEffect(id: "label", in: namespace)
                        .foregroundColor(.secondary)
                }
            }
                .font(.footnote)

            ZStack(alignment: .leading) {
                if !showLabel {
                    Text(placeholder)
                        .matchedGeometryEffect(id: "label", in: namespace)
                        .foregroundColor(.secondary)
                }

                TextField("", text: $text, onEditingChanged: { isFirstResponder in
                    withAnimation {
                        isTextFieldFirstResponder = isFirstResponder
                    }
                })
            }
                .font(.body)
        }
    }
}