TextField in SwiftUI

Create a Simple TextField in SwiftUI

Introduction

  1. Xcode 11
  2. MacOS Catalina 10.15.2

Getting Started

  1. Basic Text Field
  2. TextField Placeholder Font
  3. TextField Border and Corner Radius
  4. TextField With Icons
  5. Secure TextField

Application Entry Point

Once you save the project, Xcode should load the ContentView.swift file and display a design/preview canvas.

By default, Xcode generates some SwiftUI code for ContentView.swift. However, the preview canvas doesn’t render the app preview. You have to click the Resume button in order to see the preview.

Basic Text Field

TextField(" Enter some text", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())

Remember to create a variable to bind your text field with the following code. Now you can access the output by simply using the variable provided below.

@State var name: String = "Rishabh"

Text Field Placeholder Font

TextField("Enter some text", text: $name).textFieldStyle(RoundedBorderTextFieldStyle()).font(.headline)

Text Field Border and Corner Radius

TextField("Enter some text", text: $name).padding(10).foregroundColor(.red).overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.red, lineWidth: 2))

Text Field with Icons

HStack {
Image(systemName: “person”).foregroundColor(.gray).padding(30)
TextField(“Enter some text”, text: $name)
}

Secure TextField

SecureField(“Password”, text: $password)

Conclusion

Thanks for reading and good luck with your next SwiftUI Tutorial!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store