OTP Code Field

// OTP Code Field · syxUI · https://syxui.dev/components/form-otp
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

extension View {
    func formaCard(_ pad: CGFloat = 18) -> some View {
        self.padding(pad)
            .background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
            .overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
            .shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
    }
}

// OTP code field
struct OTPCodeField: View {
    let digits = ["4", "2", "9", "", "", ""]
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Enter the 6-digit code").font(.system(size: 14, weight: .medium)).foregroundStyle(.secondary)
            HStack(spacing: 9) {
                ForEach(digits.indices, id: \.self) { i in
                    Text(digits[i]).font(.system(size: 22, weight: .semibold).monospacedDigit()).frame(width: 44, height: 54)
                        .background(Color.primary.opacity(0.05), in: RoundedRectangle(cornerRadius: 12))
                        .overlay(RoundedRectangle(cornerRadius: 12).stroke(i == 3 ? Color.primary : .clear, lineWidth: 1.6))
                }
            }
        }.formaCard()
    }
}