Simpler, Better “Floating Label” Text Fields in SwiftUI

Photo by Manuel Sardo on Unsplash

There are certainly opinions and opinions about floating label text fields. This article is not about whether or when to use them. But if you do need to build some, it couldn’t be easier than with SwiftUI!

Let’s start with the simplest possible approach: let’s vertically stack a caption text above a text field. We’ll use exactly the same adaptive color for the caption that SwiftUI (UIKit actually) uses for placeholders, UIColor.placeholderText (SwiftUI’s Color has a constructor that takes a UIColor, so we’re good to go).

Let’s take our fledgling FloatingTextField for a spin with this example code: