/SUITextField

A SwiftUI wrapper for UITextField that enables more customizations and behaviors

Primary LanguageSwiftMIT LicenseMIT


Markdownify

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
  • A default ResponderNavigatorView usable as an InputAccessoryView to navigate through text fields
  • Attributed placeholder
  • ParseableFormatStyle when using iOS 15
  • Foundation.Formatter when using pre-iOS 15
  • 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 {
                        ResponderNavigatorView(responder: $focus) // add default ResponderNavigatorView as input 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() // add a custom accessory view 
                    }
                    .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 13/15 there are small layout jumps when switching from a text fields
  • On iOS 14 this behavior is worse: the system tries to re-layout the component infinitely! Need to understand what actually happens under the hood...

Check this issue.

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

Yu can also open your own PR and contribute to the project! Contributing 🤝

License

This software is provided under the MIT license


Thanks Bebisim ❤️