iOS7
UITextField
leftView
rightView
padding

UITextfield leftView/rightView padding on iOS7

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

UITextField does not have built-in left and right padding properties for leftView and rightView. The usual fix is to wrap the icon or accessory view in a container view that is slightly wider than the visible content, or to subclass UITextField and adjust the layout rects directly. The same pattern that worked on iOS 7 still explains the behavior today.

Why leftView and rightView Feel Tight

UITextField lets you attach accessory views with:

  • 'leftView'
  • 'rightView'
  • 'leftViewMode'
  • 'rightViewMode'

Those properties control presence and display mode, but not spacing. If you assign an image view directly, the image often sits too close to the edge or too close to the text.

So the real problem is not adding “padding” as a property. It is controlling the frame that UITextField uses for those accessory views.

The Easiest Solution: Wrap the View in a Container

The most common solution is a wrapper view that is a bit wider than the icon itself.

swift
1import UIKit
2
3let textField = UITextField(frame: CGRect(x: 20, y: 100, width: 280, height: 40))
4textField.borderStyle = .roundedRect
5
6let icon = UIImageView(image: UIImage(systemName: "magnifyingglass"))
7icon.contentMode = .scaleAspectFit
8icon.frame = CGRect(x: 12, y: 0, width: 18, height: 40)
9
10let container = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
11container.addSubview(icon)
12
13textField.leftView = container
14textField.leftViewMode = .always

The icon is placed 12 points from the left edge of the container. Because the container itself is wider than the icon, you get visible padding.

This is the simplest answer for both left and right accessory views.

Right View Padding Uses the Same Pattern

The right side works exactly the same way.

swift
1import UIKit
2
3let warning = UIImageView(image: UIImage(systemName: "exclamationmark.circle"))
4warning.contentMode = .scaleAspectFit
5warning.frame = CGRect(x: 0, y: 0, width: 18, height: 40)
6
7let rightContainer = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 40))
8warning.center = CGPoint(x: 10, y: 20)
9rightContainer.addSubview(warning)
10
11textField.rightView = rightContainer
12textField.rightViewMode = .always

For the right side, you usually position the visible content slightly left within the container so the field edge does not feel cramped.

Padding the Text Itself

Sometimes the complaint is not really about leftView or rightView. It is about the text sitting too close to the accessory. In that case, a subclass is often cleaner because you can adjust the text rects directly.

swift
1import UIKit
2
3final class PaddedTextField: UITextField {
4    override func textRect(forBounds bounds: CGRect) -> CGRect {
5        bounds.inset(by: UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8))
6    }
7
8    override func editingRect(forBounds bounds: CGRect) -> CGRect {
9        bounds.inset(by: UIEdgeInsets(top: 0, left: 8, bottom: 0, right: 8))
10    }
11}

If the field also has accessory views, you may need to combine both techniques: a padded accessory container plus custom text/editing rects.

Fine-Grained Control with leftViewRect and rightViewRect

If you want precise accessory positioning without wrapper views, subclass UITextField and override the accessory layout methods.

swift
1import UIKit
2
3final class AccessoryPaddedTextField: UITextField {
4    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
5        let rect = super.leftViewRect(forBounds: bounds)
6        return rect.offsetBy(dx: 8, dy: 0)
7    }
8
9    override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
10        let rect = super.rightViewRect(forBounds: bounds)
11        return rect.offsetBy(dx: -8, dy: 0)
12    }
13}

This gives exact control, but the wrapper-view technique is usually easier to reason about in small UI customizations.

Which Approach Should You Choose

Use a wrapper view when:

  • you only need simple spacing
  • the accessory is an icon or button
  • you want a quick solution with no subclass

Use a subclass when:

  • you need consistent padding behavior across many fields
  • text, placeholder, and accessory layout all need coordination
  • the field has a reusable design system role

The wrapper approach is usually enough for one-off forms. Subclassing pays off when the layout rules repeat.

Common Pitfalls

One common mistake is setting the leftView or rightView frame and expecting extra empty space to appear automatically. The content frame and the field layout are tightly related, so the wrapper width matters as much as the subview frame.

Another issue is forgetting to set leftViewMode or rightViewMode. If the mode stays at its default, the accessory may not appear even though the view exists.

Developers also sometimes pad the accessory but forget the text rect, so the text still feels too close to the icon.

Finally, if Auto Layout is involved elsewhere in the screen, remember that leftView and rightView themselves are not laid out by Auto Layout inside the text field. Their frames are controlled through UITextField layout rules.

Summary

  • 'UITextField does not provide a direct padding property for leftView or rightView.'
  • The usual solution is to wrap the accessory view in a slightly larger container view.
  • For more control, subclass UITextField and override leftViewRect, rightViewRect, textRect, or editingRect.
  • Padding the accessory and padding the text are related but different layout concerns.
  • For simple cases, the container-view approach is usually the fastest and cleanest fix.

Course illustration
Course illustration

All Rights Reserved.