How To Build UI Forms With SwiftUI

In this article, I will explain how to make the text field and label in SwiftUI.

Introduction

 
In a brief introduction, I gave you an overview of SwiftUI and how to build a simple user interface. The SwiftUI framework provides developers with a new way to develop a clean UI, allowing you to make it the same UI with much less code.
 
In my previous article, you learned how to make table view list and Navigation,

Designing the Text Field and Label

 
We will begin implementing text fields and labels placing them just above each text field. For creating a label, we simply use a text component and write the code like below.
  1. Text("NAME").font(.headline)  
We set the above code label text "Name" and font style type "headline".
 
To create a text field with a placeholder, you can write the code like below.
  1. TextField("Enter Restaurant NAME", text: $text)  
To place the Label above the text field, you can use a VStack component to arrange both components. You can write it like below. 
  1. struct ContentView : View {  
  2.     var body: some View {  
  3.            VStack(alignment: .leading, spacing: 10.0) {  
  4.             Text("NAME").font(.headline)  
  5.             TextField("Enter Restaurant NAME", text: $text)  
  6.             .padding(.all)  
  7.             .clipShape(RoundedRectangle(cornerRadius: 5.0))  
  8.             .background(Color(red: 239.0/255.0, green: 243.0/255, blue: 244.0/255.0, opacity:1.0))  
  9.         }.padding(.horizontal,15)  
  10.   }  
  11. }  
OUTPUT

How To Build UI Form With SwiftUI
 
For reuse purpose, we will create a separate struct class, which accepts two parameters, label and placeholder -
  1. struct TextFieldWithLabel: View {  
  2.     var label: String  
  3.     var placeholder : String  
  4.     @State var text: String = ""  
  5.     var body: some View {  
  6.         VStack(alignment: .leading, spacing: 10.0) {  
  7.             Text(label).font(.headline)  
  8.             TextField(placeholder, text: $text)  
  9.             .padding(.all)  
  10.             .clipShape(RoundedRectangle(cornerRadius: 5.0))  
  11.             .background(Color(red: 239.0/255.0, green: 243.0/255, blue: 244.0/255.0, opacity:1.0))  
  12.         }.padding(.horizontal,15)  
  13.     }  
  14. }  
Now, you can create a text field by constructing a TextFieldWithLabel struct class with specified Text Label variable. The name is "label" and the text field placeholder variable is "placeholder" like below,
  1. struct ContentView: View {  
  2.     var body: some View {  
  3.          TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")  
  4.   }  
  5. }  

Creating Multiple TextFields using List

 
To present multiple text fields in a vertical arrangement, you can use "VStack" component to layout the text fields and label. We will make the form scrollable by embedding into a stack using the "List" that allows developers to easily make a table list. Now contentView looks like - 
  1. struct ContentView: View {  
  2.     var body: some View {   
  3.             List{  
  4.                 VStack(alignment:.leading, spacing: 10.0) {  
  5.                    TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")  
  6.                    TextFieldWithLabel(label:"TYPE", placeholder:"Enter Restaurant TYPE")  
  7.                    TextFieldWithLabel(label:"ADDRESS", placeholder:"Enter Restaurant ADDRESS")  
  8.                    TextFieldWithLabel(label:"PHONE", placeholder:"Enter Restaurant PHONE")  
  9.                    TextFieldWithLabel(label:"DESCRIPTION", placeholder:"Enter Restaurant DESCRIPTION")  
  10.                 }.listRowInsets(EdgeInsets())  
  11.             }   
  12.     }  
  13. }  
Above code listRowInsects, you can extend the text field closer to the edges of the display.
 
OUTPUT
 
How To Build UI Form With SwiftUI
 

Creating a rounded Button

 
The SwiftUI framework provides a component called "Button" to create a Button. We will create RoundedButton struct class for better organizing code.
  1. struct RoundedButton: View {  
  2.     var body: some View {  
  3.         Button(action: {}) {  
  4.             HStack{  
  5.                 Spacer()  
  6.                 Text("SAVE")  
  7.                 .font(.headline)  
  8.                 .foregroundColor(.white)  
  9.                 Spacer()  
  10.             }  
  11.         }  
  12.         .padding(.vertical,10.0)  
  13.         .clipShape(RoundedRectangle(cornerRadius: 4.0))  
  14.         .background(Color.red)  
  15.         .padding(.horizontal, 80)  
  16.     }  
  17. }  

Embedding the View into a NavigationView

 
The final step is to embed the entire form in a navigation view.  SwiftUI provides a container view named NavigationView which creates a navigation interface. 
  1. struct ContentView: View {  
  2.     var body: some View {  
  3.         NavigationView {  
  4.             List{  
  5.                 VStack(alignment:.leading, spacing: 10.0) {  
  6.                    TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")  
  7.                    TextFieldWithLabel(label:"TYPE", placeholder:"Enter Restaurant TYPE")  
  8.                    TextFieldWithLabel(label:"ADDRESS", placeholder:"Enter Restaurant ADDRESS")  
  9.                    TextFieldWithLabel(label:"PHONE", placeholder:"Enter Restaurant PHONE")  
  10.                    TextFieldWithLabel(label:"DESCRIPTION", placeholder:"Enter Restaurant DESCRIPTION")  
  11.                    RoundedButton().padding(.top,20)  
  12.                 }.listRowInsets(EdgeInsets())  
  13.             }  
  14.             .navigationBarTitle("New Restaurant")  
  15.         }  
  16.     }  
  17. }  
Final output
 
How To Build UI Form With SwiftUI 
 

Summary

 
I hope you understood how to build a form in SwiftUI with the help of labels and text fields. Thanks, cheers!!