avatarVikram Kriplaney

Summary

This article discusses a simple and effective way to create "Floating Label" text fields in SwiftUI, a UI toolkit for building applications across all Apple platforms.

Abstract

The article begins by acknowledging the varying opinions on the use of floating label text fields. It then proceeds to demonstrate how to create a basic floating label text field by vertically stacking a caption text above a text field, using the same adaptive color for the caption that SwiftUI uses for placeholders. The author then improves upon this basic design by animating the placeholder into place when the text field is not empty, initially offsetting it vertically and setting its initial opacity to zero. The article concludes by suggesting further improvements, such as replacing the default placeholder and scaling it down into place, and animating the color of the placeholder.

Bullet points

  • The article discusses the creation of floating label text fields in SwiftUI.
  • It starts with a basic approach of stacking a caption text above a text field.
  • The author uses the same adaptive color for the caption as SwiftUI uses for placeholders.
  • The author then improves the design by animating the placeholder into place when the text field is not empty.
  • The placeholder is initially offset vertically and its initial opacity is set to zero.
  • The article suggests further improvements, such as replacing the default placeholder and scaling it down into place.
  • The author also suggests animating the color of the placeholder.

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:

This already starts to look nice, but there’s that duplicated placeholder text. We know that the TextField hides its placeholder as soon as its text is not empty, so let’s animate our little placeholder into place when that happens. We’ll initially give it a slight vertical offset so that it rises up as it appears, and set its initial opacity to zero. We’ll also add a default animation between the two states (text empty and non-empty).

Not too bad for such little code! But if you look closely, you’ll notice that the placeholder doesn’t actually animate. We just faded a new one in as the TextField’s built-in placeholder disappeared.

If we want a little more perfection, we’ll have to replace the default placeholder. We’ll pass an empty placeholder to the TextView and overlay our own with a ZStack. Then, we’ll scale it down into place.

Note that we added a little top padding to make place for the scaled-down placeholder. We also made the animation a little more playful with a spring.

You can even animate the color of the placeholder, like so:

Have fun tweaking the animations to your taste and for your use-case! 🎉

Swiftui
Swift
iOS
Mobile App Development
Mobile Apps
Recommended from ReadMedium