struct TextFieldExample: View {
    
    @State private var phone = ""
    @State private var age = ""
    @State private var name = ""
    @State private var securePhrase = ""
    @State private var email = ""
    
    var body: some View {
        VStack {
            
            Image("dt")
                .clipShape(Circle())
                .shadow(color: Color.black, radius: 2, x: 1, y: 1)
                .overlay(Circle().stroke(Color.gray, lineWidth: 2))
                
            // phone
            HStack {
                Image(systemName: "phone")
                    .foregroundColor(.gray).font(.headline)
                TextField("Phone number", text: $phone)
                    .keyboardType(.phonePad)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            //age
            HStack {
                Image(systemName: "person")
                    .foregroundColor(.gray).font(.headline)
                TextField("Age", text: $age)
                    .keyboardType(.numberPad)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            // name
            HStack {
                Image(systemName: "pencil")
                    .foregroundColor(.gray).font(.headline)
                TextField("Name", text: $name)
                    .keyboardType(.alphabet)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            // secure phrase
            HStack {
                Image(systemName: "lock.doc.fill")
                    .foregroundColor(.gray).font(.headline)
                TextField("Secure Phrase", text: $securePhrase)
                    .keyboardType(.asciiCapable)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            // secure phrase
            HStack {
                Image(systemName: "envelope")
                    .foregroundColor(.gray).font(.headline)
                TextField("Email", text: $email)
                    .keyboardType(.emailAddress)
            }
            .padding()
            .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray, lineWidth: 1))
            .padding(.horizontal)
            
            HStack {
                Button(action: {}) {
                    Label("Sign Up", systemImage: "pencil.and.outline")
                }
                .buttonStyle(.borderedProminent)
                
                
                Button(action: {}) {
                    Label("Cancel", systemImage: "pencil.slash")
                }
                .buttonStyle(.bordered)
            }
        }
    }
}

Supported keyboard types are:

• .default : Default type for current input method
• .asciiCapable : Displays a keyboard which can enter ASCII characters
• .numbersAndPunctuation : Displays Numbers and assorted punctuation
• .URL : A type optimized for URL entry (shows . / .com prominently)
• .numberPad : A number pad with locale-appropriate digits (0–9, ۰-۹, ०-९, etc.). Suitable for PIN entry
• .phonePad : A phone pad (1–9, *, 0, #, with letters under the numbers)
• .namePhonePad : A type optimized for entering a person’s name or phone number
• .emailAddress : A type optimized for multiple email address entry (shows space @ . prominently)
• .decimalPad : A number pad with a decimal point
• .twitter : A type optimized for twitter text entry (easy access to @ #)
• .webSearch : A default keyboard type with URL-oriented addition (shows space . prominently)
• .asciiCapableNumberPad : A number pad (0–9) that will always be ASCII digits.
• .alphabet : Displays a keyboard which can enter alphabetic characters, use .asciiCapable instead.