SwiftUI — Custom Underline TextField

Easy step by step guide on how to make a fully customizable underline TextField.

Bruno Lorenzo
Sep 29, 2020 · 3 min read
Photo by Emile Perron on Unsplash

When I made my transition from UIKit to SwiftUI one of the first challenges that I faced was how to make a custom text field. Text fields are one of the most common components in every app and there'll be times when the default UI won't be enough for us. Very often we need to make some customizable text fields with icons in one side, borders, animations, etc. Lucky for us, SwiftUI gives us more flexibility to do that and an easiest way than UIKit.

In this article we’re gonna make a custom text field using SwiftUI instead UIKit.

If we take a look to the final UI we can differentiate three different components:

  • The text field
  • The icon
  • The under line

We can easily achive this with an HStack and a VStack:

So far so good. But every time we want to use this particular design we have to replicate this bunch of code. So, let’s make it a reusable component.

First of all, lets create a struct that is going to hold the TextField configuration, as follow:

We can use it like this:

That’s much better. But what happen if we want to take a step further and customize the TextView placeholder? Like the font and the color for instance. Unfortunately for us, we don’t have that flexibility (for now) in the TextField component. So we have to put our creativity to fly in order to achieve this.

Given that we can’t customize the TextView placeholder we don't an alternative but to make our own placeholder to our UnderlineTextFieldView struct.

We’re almost there but with this approach we still have an issue to solve. We now have our own placeholder, however if you run the code you’re gonna notice that when we start typing something in our text field, the placeholder doesn’t disappear. This is because we are putting a simple text as a placeholder without any spacial setup. We need to make some adjustments so we can manage the state of the text field.

To do this we can add another String property with the @Binding wrapper that’s going to hold the text that the user is typing in our ContentView. Then we can check if that property is empty or not. If it’s empty then we show our custom placeholder and if it isn't we don't.

And that’s it! Now we’ve our own custom UnderlineTextFieldView!

The above implementation is more than enough. We achieved what we wanted in the first place. Though, we can improve the code a little bit.

First of all, I always like to separate the code into variables to make it semantically more readable. Also, we can make the icon image optional. In that way, we can use our TextField with or without any icon.

We now have a nice reusable code. If you want you can improve it by making it reusable for a TextField and a SecureField as well. We just need to change the textField property type for a generic one:

Thanks for reading, I hope you find it helpful =)

You can check the full project here

If you’ve any questions or comments please feel free to reach me on twitter: b_lorenzo10 . I’ll be happy to chat =)

Cheers!

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bruno Lorenzo

Written by

iOS Engineer at Houlak.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Bruno Lorenzo

Written by

iOS Engineer at Houlak.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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