A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.

Overview

FloatingPromptTextField

A prompt is the label in a text field that informs the user about the kind of content the text field expects. In a default TextField it disappears when the user starts typing, hiding this important information.

A "floating" prompt/label/placeholder is a UX pattern pioneered by JVFloatLabeledTextField where the prompt floats over the text field when it becomes active, keeping this useful information visible even after the user has begun typing.

FloatingPromptTextField is a SwiftUI version of this UI component. It uses the new Focus system and because of it requires iOS 15.

Lock Screen

Features

  • Use a Text view as the prompt
  • Use any View as the prompt
  • Use a different View as the floating prompt
  • Set the floating prompt scale
  • Set the floating prompt spacing

Usage

Usage is as simple as importing FloatingPromptTextField, declaring a @State String variable, and initializing FloatingPromptTextField with a Text or any View.

@import FloatingPromptTextField

...

@State var text: String = ""

...

FloatingPromptTextField(text: $text, prompt: Text("Prompt"))

FocusTextField(text: $text) {
	Label("Prompt", systemImage: "pencil.circle")
}

Customization

All of the customization is done using modifier-style functions. Since these are exclusive to FloatingPromptTextField, they must be called before calling other modifiers.

Customizing the Floating Prompt

The floatingPrompt receives a view that will replace the prompt as it becomes floating. For best results it's recommended to use a view that will have the same height as the prompt.

In this example we use a Text view with the same font but different contents and foreground styles.

FloatingPromptTextField(text: $text) {
	Text("Prompt")
}
.floatingPrompt(
	Text("Floating Prompt")
		.foregroundStyle(Color.blue)
)

TextField Font

Just like setting a font on a Text view, use the font modifier.

FloatingPromptTextField(text: $text, prompt: Text("Prompt"))
	.font(.title)

TextField Color/Gradient

FloatingPromptTextField(text: $text, prompt: Text("Prompt"))
	.textFieldForegroundStyle(Color.red)

Floating Prompt Spacing and Scale

promptSpacing will determine the spacing between the text field and the floating prompt.

floatingPromptScale will determine the scale that will be used when the prompt becomes a floating label.

FloatingPromptTextField(text: $text, prompt: Text("Prompt"))
	.promptSpacing(5)
	.floatingPromptScale(0.65)

To Do

  • Accessibility
  • Support the new TextField initializers that receive a binding that can be formatted.
You might also like...
A beautiful and flexible text field control implementation of
A beautiful and flexible text field control implementation of "Float Label Pattern". Written in Swift.

SkyFloatingLabelTextField SkyFloatingLabelTextField is a beautiful, flexible and customizable implementation of the space saving "Float Label Pattern"

Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.
Text entry controls which contain a built-in title/label so that you don't have to add a separate title for each field.

FloatLabelFields Overview Installation Via Interface Builder Via Code Credits Additional References Questions Overview FloatLabelFields is the Swift i

📝 The next in the generations of 'growing textviews' optimized for iOS 8 and above.
📝 The next in the generations of 'growing textviews' optimized for iOS 8 and above.

NextGrowingTextView The next in the generations of 'growing textviews' optimized for iOS 8 and above. As a successor to HPGrowingTextView, NextGrowing

 HTYTextField A UITextField with bouncy placeholder.
HTYTextField A UITextField with bouncy placeholder.

HTYTextField - A UITextField with bouncy placeholder. Screenshot Installation CocoaPods Add the dependency to your Podfile

A light-weight UITextView subclass that adds support for placeholder.
A light-weight UITextView subclass that adds support for placeholder.

RSKPlaceholderTextView A light-weight UITextView subclass that adds support for placeholder. Installation Using Swift Package Manager To add the RSKPl

A UITextView subclass that adds support for multiline placeholder written in Swift.
A UITextView subclass that adds support for multiline placeholder written in Swift.

KMPlaceholderTextView A UITextView subclass that adds support for multiline placeholder written in Swift. Usage You can set the value of the placehold

An UITextView in Swift. Support auto growing, placeholder and length limit.
An UITextView in Swift. Support auto growing, placeholder and length limit.

GrowingTextView Requirements iOS 8.0 or above Installation CocoaPods GrowingTextView is available through CocoaPods. To install it, simply add the fol

DGPlaceholderTextView - A light-weight UITextView that supports for placeholder
DGPlaceholderTextView - A light-weight UITextView that supports for placeholder

DGPlaceholderTextView Requirements Installation Usage Properties DGPlaceholderTe

Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI

FloatingLabelTextFieldSwiftUI FloatingLabelTextFieldSwiftUI is a small and lightweight SwiftUI framework written in completely swiftUI (not using UIVi

Releases(0.2.0)
Owner
Emilio Peláez
iOS Developer since 2009, sherlocked in 2011
Emilio Peláez
Placeholder views based on content, loading, error or empty states

StatefulViewController A protocol to enable UIViewControllers or UIViews to present placeholder views based on content, loading, error or empty states

Alexander Schuch 2.1k Dec 8, 2022
Floating-textfield-swiftui - Floating textfield With SwiftUI

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

null 1 Feb 11, 2022
DTTextField is a custom textfield with floating placeholder and error label

DTTextField Introduction DTTextField is a UITextField library with floating placeholder and error label. Floating placeholder inspired from JVFloatLab

Dhaval Thanki 310 Jan 5, 2023
Simple placeholder move textfield

PlaceholderTextField Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 11.0 o

null 6 Mar 9, 2022
TTextField is developed to help developers can initiate a fully standard textfield including title, placeholder and error message in fast and convinient way without having to write many lines of codes

TTextField is developed to help developers can initiate a fully standard textfield including title, placeholder and error message in fast and convinient way without having to write many lines of codes

Nguyen Duc Thinh 7 Aug 28, 2022
A passcode entry field for macOS similar to Apple's two-factor authentication field.

DSFPasscodeView A passcode entry field for macOS similar to Apple's two-factor authentication field. About The control is made up of multiple groups o

Darren Ford 10 Nov 12, 2022
Focus text field in SwiftUI dynamically and progress through form using iOS keyboard.

Focuser Focuser allows to focus SwiftUI text fields dynamically and implements ability move go through the form using Keyboard for iOS 13 and iOS 14.

Art Technologies 118 Dec 25, 2022
Autocomplete for a text field in SwiftUI using async/await

Autocomplete for a text field in SwiftUI using async/await

Dmytro Anokhin 13 Oct 21, 2022
Currency text field formatter available for UIKit and SwiftUI 💶✏️

CurrencyText provides lightweight libraries for formating text field text as currency, available for both UIKit and SwiftUI. Its main core, the Curren

Felipe Lefèvre Marino 183 Dec 15, 2022
AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

AEOTPTextField - A beautiful iOS OTP Text Field library, written in Swift with full access customization in UI.

Abdelrhman Kamal 79 Jan 3, 2023