TextFields and SecureFields are used for data entry fields such as form fields and passwords (SecureField).
- Basic TextField
- TextField with padding styling
- TextField with Background Color styling
- TextField with border styling
- TextField with RoundedBorderTextFieldStyle()
- TextField foregroundColor style
- SecureFields
Basic TextField
The TextField is embedded in a Form for grouping of controls used for DataEntry. It has a placeholder string as the first parameter and a text parameter that holds a binding string which holds a State Variable (@State var ) which will hold what is entered in the TextField.
@State var firstname: String = ""
var body: some View {
Form {
TextField("First Name", text: $firstname)
}
}

TextField with padding styling
The .padding() style will add padding around the TextField component. By default padding is set to all for sides of the component. You can specify a padding size by putting a number inside the parenthesis. You can also specify a side to pad by using the values listed below inside the parenthesis after TextField:
- .bottom
- .top
- .leading (Left)
- .trailing (Right).
In this code I used the Section component to separate sections of the Form. I reused the State variable just for simplicity. In a real application you would create a @State variable for all TextFields.
@State var firstname: String = ""
var body: some View {
Form {
Section
{
TextField("First Name", text: $firstname)
.padding()
}
Section
{
TextField("First Name", text: $firstname)
.padding(25)
}
Section
{
TextField("First Name", text: $firstname)
.padding(.bottom)
}
Section
{
TextField("First Name", text: $firstname)
.padding(.top)
}
Section
{
TextField("First Name", text: $firstname)
.padding(.leading)
}
Section
{
TextField("First Name", text: $firstname)
.padding(.trailing)
}
}
}

TextField with Background Color styling
The background style allows you to change the background color of the TextField.
@State var firstname: String = ""
var body: some View {
Form {
Section
{
TextField("First Name", text: $firstname)
.padding()
.background(Color(red:239/255,green:245/255,blue:250/255))
}
}
}

TextField with border styling
The border style allow you to specify a border for the TextField
@State var firstname: String = ""
var body: some View {
Form {
Section
{
TextField("First Name", text: $firstname)
.padding()
.border(Color.red)
}
}
}

TextField with RoundedBorderTextFieldStyle()
The textFieldStyle allows you to add preset styles to the TextField. The RoundedBorderTextField Style adds a rounded border to the TextField.
@State var firstname: String = ""
var body: some View {
Form {
Section
{
TextField("First Name", text: $firstname)
.padding()
}
Section
{
TextField("First Name", text: $firstname)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
}
}

TextField foregroundColor style
The foregroundColor style allows you to change the color of the input text.
@State var firstname: String = ""
var body: some View {
Form {
Section
{
TextField("First Name", text: $firstname)
.padding()
.foregroundColor(.blue)
}
}
}

SecureFields
The SecureField is used to enter private text. All of the styling that can be applied to the TextField can be applied to the SecureField.
@State var password: String = ""
var body: some View {
Form {
Section
{
SecureField("Password", text: $password)
.padding()
}
}
}
