Floating Label

// Floating Label · syxUI · https://syxui.dev/components/inp-floating
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let inpBlue = Color(red: 0.0, green: 0.47, blue: 1.0)

// Floating label field (focused)
struct FloatingLabelInput: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 2) {
            Text("Email").font(.system(size: 12, weight: .medium)).foregroundStyle(inpBlue).padding(.horizontal, 14).padding(.top, 9)
            Text("jane@example.com").font(.system(size: 16)).padding(.horizontal, 14).padding(.bottom, 10)
        }.frame(maxWidth: .infinity, alignment: .leading).overlay(RoundedRectangle(cornerRadius: 12, style: .continuous).stroke(inpBlue, lineWidth: 1.5)).frame(width: 300)
    }
}