TextInputView

A TextField Replacement

In his excellent YouTube tutorial series on Building SwiftUI Components, Peter Friese (@peterfriese on Twitter) demonstrated how to create a custom TextField with floating label text.

See video at https://youtu.be/Sg0rfYL3utI

This is an enhanced implementation of that TextInputView that he demonstrated to include the following:

Rounded Border TextField type styling
SecureTextField type option
SizeCategory handling for different size categories set by the user.

Installation

Rather than creating a Swift Package for this, I have chosen to offer it up simply as a custom SwiftUI view that you can use in your own projects and modify as you see fit.

To install, simply create a Swift file in your project and replace the content with the code following.

Configuration

TextField Replacement

Use as you would a TextField.

TextInputView("Email Address", text: $email)

SecureField Replacement

Add the optional isSecure argument with a value of true

TextInputView("Password", text: $password, isSecure: true)

**Note: **Do not use any textfieldStyle modifiers. The TextInputField will always display a roundedBorder type of text input view.

Sample Project

Clone this repo if you want the example project used to create the gif.

TextInputView

import SwiftUI

struct TextInputView: View {
    @Environment(\.sizeCategory) var sizeCategory
    var title: String
    @Binding var text: String
    var isSecure = false
    var offSet: Double {
        switch sizeCategory {
        case .extraSmall:
            return -27
        case .small:
            return -27
        case .medium:
            return -28
        case .large:
            return -30
        case .extraLarge:
            return -33
        case .extraExtraLarge:
            return -35
        case .extraExtraExtraLarge:
            return -40
        case .accessibilityMedium:
            return -45
        case .accessibilityLarge:
            return -50
        case .accessibilityExtraLarge:
            return -55
        case .accessibilityExtraExtraLarge:
            return -65 //
        case .accessibilityExtraExtraExtraLarge:
            return -70
        @unknown default:
            return -33
        }
    }
    var paddingTop: Double {
        switch sizeCategory {
        case .extraSmall:
            return 18
        case .small:
            return 18
        case .medium:
            return 20
        case .large:
            return 22
        case .extraLarge:
            return 24
        case .extraExtraLarge:
            return 25
        case .extraExtraExtraLarge:
            return 28
        case .accessibilityMedium:
            return 30
        case .accessibilityLarge:
            return 35
        case .accessibilityExtraLarge:
            return 40
        case .accessibilityExtraExtraLarge:
            return 43
        case .accessibilityExtraExtraExtraLarge:
            return 45
        @unknown default:
            return 25
        }
    }
    init(_ title: String, text: Binding<String>, isSecure: Bool = false) {
        self.title = title
        self._text = text
        self.isSecure = isSecure
    }
    var body: some View {
        ZStack(alignment: .leading) {
            Text(title)
                .foregroundColor(text.isEmpty ? Color(.placeholderText) : Color(.secondaryLabel))
                .offset(y: text.isEmpty ? 0 : offSet)
                .scaleEffect(text.isEmpty ? 1 : 0.8, anchor: .leading)
            if isSecure {
                SecureField("", text: $text)
            } else {
                TextField("", text: $text)
            }
        }
        .overlay {
            RoundedRectangle(cornerRadius: 5)
                .stroke(Color(uiColor: UIColor.placeholderText).opacity(0.5), lineWidth: 0.5)
                .padding(-5)
        }
        .padding(.top, text.isEmpty ? 10 : paddingTop)
        .animation(.default, value: text)
    }
}

You might also like...

TextField with smart suggestion

AutoCompleteTextField Features Provides a subclass of UITextField that has suggestion from input Has autocomplete input feature Data suggestion are pr

63 Nov 13, 2022

Library that allows you binding `enabled` property of button with textable elements (TextView, TextField)

What is NxEnabled? It's a fairly common case, when the enabled state of button depends on some textable elements such as TextView, TextField. So this

33 Sep 20, 2021

Awesome TextField is a nice and simple libriary for iOS and Mac OSX

Awesome TextField is a nice and simple libriary for iOS and Mac OSX. It's highly customisable and easy-to-use tool. Works perfectly for any registration or login forms in your app.

225 Nov 21, 2022

Apple TextField created according to the Material.IO guidelines of 2019. Featured at Medium.

CocoaTextField Highly customizable text field created according to Material.IO guidelines. Minimum iOS version 11.0 Carthage github "edgar-zigis/Cocoa

266 Nov 26, 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