SwiftUI: Padding inside TextField

Question

I have a TextField in SwiftUI. When I apply padding to it as

TextField(text, text: $value)
    .padding()

the padding is outside of the tap area of the TextField, i.e. tapping on the padding does not bring the text field into focus.

I would like to be able to focus the TextField even if the user taps on the padding.

Check if [this](https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area/) answer your question — ScorpiCon, Feb 13 '21 at 11:41
That's awfully complicated for something so basic. Having to include libraries just to add padding to my TextField properly. Anyway. Thanks @ScorpiCon — Vivek Roy, Feb 13 '21 at 12:12
Does this answer your question? [SwiftUI TextField touchable Area](https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area) — Nelu, Dec 03 '21 at 14:27

score 20 · Answer 1 · answered Aug 13 '21 at 11:22

20

You can try this. At least worked for me. Hope that helps someone:

            TextField("", text: $textfieldValueBinding)
                .frame(height: 48)
                .padding(EdgeInsets(top: 0, leading: 6, bottom: 0, trailing: 6))
                .cornerRadius(5)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                        .stroke(lineWidth: 1.0)
                )

answered Aug 13 '21 at 11:22

Hector Rubial

225
2
3

This is the cleanest solution to OP's question. – vikzilla Nov 08 '21 at 00:00
9

It works visually, but the padding area is not tappable, so it doesn't solve the OP's problem. – magma Dec 02 '21 at 20:57
Works for me in SwiftUI4 – iadcialim24 Aug 25 '23 at 06:11

sugar baron · Answer 2 · 2023-02-21T13:45:05.750

For iOS 15 and above you can use this:

var body: some View {
    TextField("placeholder", text: $text).focusablePadding()
}



extension View {
    
    func focusablePadding(_ edges: Edge.Set = .all, _ size: CGFloat? = nil) -> some View {
        modifier(FocusablePadding(edges, size))
    }
    
}

private struct FocusablePadding : ViewModifier {
    
    private let edges: Edge.Set
    private let size: CGFloat?
    @FocusState private var focused: Bool
    
    init(_ edges: Edge.Set, _ size: CGFloat?) {
        self.edges = edges
        self.size = size
        self.focused = false
    }
    
    func body(content: Content) -> some View {
        content
            .focused($focused)
            .padding(edges, size)
            .contentShape(Rectangle())
            .onTapGesture { focused = true }
    }
    
}

score 0 · Answer 3 · answered Feb 13 '21 at 16:04

you can check this. for now i only did with top and bottom padding. you can do the same with the leading and trailing(or with horizontal and vertical). as asked in the question this would do this "I would like to be able to focus the TextField even if the user taps on the padding."

struct ContentView: View {
@State var name = ""
@State var isTextFieldFocused = false
var body: some View {
        ZStack {
            HStack{
                Text(name)
                    .font(.system(size: 50 , weight: .black))
                    .foregroundColor(isTextFieldFocused ? Color.clear : Color.black)
                Spacer()
            }
            TextField(name, text: $name , onEditingChanged: { editingChanged in
                isTextFieldFocused = editingChanged
            }) 
            .font(.system(size: isTextFieldFocused ? 50 :  100 , weight: .black))
            .foregroundColor(isTextFieldFocused ? Color.black  : Color.clear)
            .frame(width: 300, height: isTextFieldFocused ? 50 :  100 , alignment: .center)
                        .padding(.leading, isTextFieldFocused ? 25 : 0  )
                        .padding(.trailing, isTextFieldFocused ? 25 : 0 )
            
            .padding(.top,isTextFieldFocused ? 25 : 0 )
            .padding(.bottom,isTextFieldFocused ? 25 : 0 )
            
        }.frame(width: 300)
        .background(Color.red.opacity(0.2))
}
}

This does not answer the question. It adds padding if the textfield does change. But the question is *how to focus the TextField when the user taps the added padding*. — Ali, May 05 '21 at 08:13
This is the answer from https://stackoverflow.com/questions/56795712/swiftui-textfield-touchable-area. My issue with it is I have to tap twice for the textfield to focus if text has previously been entered. — Nelu, Dec 03 '21 at 14:26

score 0 · Answer 4 · answered Jun 25 '21 at 07:25

Yes, but you have to create your own TextFieldStyle. Here's an example:

struct CustomTextField: View {
    
    public struct CustomTextFieldStyle : TextFieldStyle {
        public func _body(configuration: TextField<Self._Label>) -> some View {
            configuration
                .font(.largeTitle) // set the inner Text Field Font
                .padding(10) // Set the inner Text Field Padding
                //Give it some style
                .background(
                    RoundedRectangle(cornerRadius: 5)
                        .strokeBorder(Color.primary.opacity(0.5), lineWidth: 3)) 
        }
    }
    @State private var password = ""
    @State private var username = ""
    
    var body: some View {
        VStack {
            TextField("Test", text: $username)
                .textFieldStyle(CustomTextFieldStyle()) // call the CustomTextField
            SecureField("Password", text: $password)
                .textFieldStyle(CustomTextFieldStyle())
        }.padding()
    }
}

This doesn't seem to affect the tap area. – arsenius Jul 19 '21 at 07:07 — arsenius, Jul 19 '21 at 07:07

Farshid · Answer 5 · 2022-01-17T07:51:19.287

-2

TextField(
    "TextFiled",
    text: $teamNames,
    prompt: Text("Text Field")
        .foregroundColor(.gray)
)
    .padding(5)
    .frame(width: 250, height: 50, alignment: .center)
    .background(
        RoundedRectangle(cornerRadius: 25, style: .continuous)
            .foregroundColor(.white)
            .padding(.horizontal, -30)
    )

edited Jan 17 '22 at 07:51

answered Jan 17 '22 at 07:46

Farshid

17
2

Adding a negative padding in the background modifier will do the job. – Farshid Jan 17 '22 at 07:53
adding negative padding to the background modifier won't make the padding tappable? – yspreen Dec 13 '22 at 23:12

score -4 · Answer 6 · answered Feb 13 '21 at 12:34

-4

I don't know if you can give padding inside of a TextField, but you can pad it from outside environment and give it a background of a shape with the same color of your TextField background.

Try this;

        TextField("Username", text: $value)
            .background(Color.yellow)
            .padding(50)
            .background(Capsule().fill(Color.white))

answered Feb 13 '21 at 12:34

Mehmet Demirkan

1
2

2

I want to increase the tap area of the TextField. This does not do that right? – Vivek Roy Feb 13 '21 at 12:41

SwiftUI: Padding inside TextField

6 Answers6