A SwiftUI wrapper for UITextField that enables more customizations and behaviors

SwiftUI Text Field

A SwiftUI wrapper of UITextField that allows more customization

Key FeaturesInstallationUsageDocumentationLicense

Key Features

  • InputView and InputAccessoryView
  • LeftView and RightView
  • All UITextFieldDelegate methods exposed as SwiftUI modifiers.
  • Programmatic navigation similar to iOS 15 FocusState
  • DocC documented!

Installation

SUITextField can be installed using Swift Package Manager.

  1. In Xcode open File/Swift Packages/Add Package Dependency… menu.

  2. Copy and paste the package URL:

https://github.com/ricocrescenzio95/SUITextField

For more details refer to Adding Package Dependencies to Your App documentation.

Usage

Just use it as you would use any other SwiftUI view!

struct ContentView: View {

    enum Responder {
        case first
        case second
    }

    @State private var text = "A test text"
    @ResponderState var focus: Responder?
    @State private var date = Date()

    var body: some View {
        ScrollView {
            VStack {
                SUITextField(text: $text, placeholder: "Insert a text...")
                    .inputAccessoryView {
                        MyAccessoryView() // add an accessory view 
                    }
                    .onReturnKeyPressed {
                        focus = nil // set focus to nil to close keyboard on return key tap
                    }
                    .leftView { // add a left view to clear text on tap
                        Button(action: { text = "" }) {
                            Image(systemName: "trash")
                        }
                        .padding(.horizontal, 2)
                    }
                    .responder($focus, equals: .first)
                    .uiTextFieldTextLeftViewMode(.whileEditing)
                SUITextField(text: .constant(date.description))
                    .inputAccessoryView {
                        MyAccessoryView()
                    }
                    .inputView {
                        // Use a date picker as input view!
                        DatePicker("Select date", selection: $date)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .datePickerStyle(.wheel)
                            .labelsHidden()
                    }
                    .responder($focus, equals: .second)
            }
            .padding()
        }
        // apply style to all children text field!
        .uiTextFieldBorderStyle(.roundedRect)
    }

    // more code...

Documentation

Use Apple DocC generated documentation, from Xcode, Product > Build Documentation.

Known Issues

  • When an external keyboard is connected and the software keyboard is hidden, on iOS 15 there is small layout jump when switching from a text field with custom input view and one with normal software keyboard
  • On iOS 14 this behavior is worse: sometimes the system tries to re-layout the component infinitely, leading to a stack overflow and crash! Need to understand what actually happens under the hood…

Found a bug or want new feature?

If you found a bug, you can open an issue as a bug here

Want a new feature? Open an issue here

License

This software is provided under the MIT license


Thanks Bebisim ❤️

GitHub

View Github