iPhoneNumberTextField

Quickly implement a text field designed for phone numbers. πŸ“±πŸ”’

1.

Install iPhoneNumberTextField.

2.

Add iPhoneNumberTextField to your project. 

import SwiftUI
import iPhoneNumberTextField

struct ContentView: View {
    @State var text: String = ""
    @State var isEditing: Bool = false

    var body: some View {
        iPhoneNumberTextField("Placeholder",
                              text: $text,
                              isEditing: $isEditing)
    }
}

3.

Customize your iPhoneNumberTextField.


Examples

Starter

Toggle the keyboard with isEditing.

import SwiftUI
import iPhoneNumberTextField
import iGraphics

struct ContentView: View {
    @State var text: String = ""
    @State var isEditing: Bool = false

    var body: some View {
        iPhoneNumberTextField("Placeholder",
                              text: $text,
                              isEditing: $isEditing)
            .style()

        Button(action: { isEditing.toggle() },
               label: { iGraphicsBox(.paragraph) })
  }
}

Customize

iPhoneNumberTextField has three required parameters: 1️⃣ a placeholder, 2️⃣ a text binding, and 3️⃣ an isEditing binding. iPhoneNumberTextFieldalso supports a variety of modifiers.

Example: Change the foreground color, accent color, and text alignment with the following code block: 

iPhoneNumberTextField("Placeholder", text: $text, isEditing: $isEditing)
    .foregroundColor(Color.Purple)
    .accentColor(Color.Green)
    .multilineTextAlignment(.leading)

Use our exhaustive input list to customize your text field.

Modifier Description 
.fontFromUIFont(font: UIFont?) -> iPhoneNumberTextField
 Modifies the text field’s font from a UIFont object. πŸ” πŸ”‘ 
.foregroundColor(color: Color?) -> iPhoneNumberTextField
 Modifies the text color 🎨 of the phone number text field. 
.accentColor(accentColor: Color?) -> iPhoneNumberTextField
 Modifies the cursor color 🌈 of the phone number text field πŸ–±πŸ’¬ 
.multilineTextAlignment(alignment: TextAlignment) -> iPhoneNumberTextField
 Modifies the text alignment of a phone number text field. β¬…οΈβ†”οΈβž‘οΈ 
.clearsOnBeginEditing(shouldClear: Bool) -> iPhoneNumberTextField
 Modifies the clear-on-begin-editing setting of a phone number text field. βŒβ–ΆοΈ 
.disabled(disabled: Bool) -> iPhoneNumberTextField
 Modifies whether the phone number text field is disabled. βœ‹ 
.onEditingBegan(action: { code }) -> iPhoneNumberTextField
 Modifies the function called when text editing begins. ▢️ 
.onEdit(action: { code }) -> iPhoneNumberTextField
 Modifies the function called when the user makes any changes to the text in the text field. πŸ’¬ 
.onEditingEnded(action: { code }) -> iPhoneNumberTextField
 Modifies the function called when text editing ends. πŸ”š 
.style() -> some View
 A default style meant to quickly render an aesthetic phone number input. Style takes 7 parameters – all with defaults – and returns some View. For this reason ensure that .style is your final modifier. 
.style(height: CGFloat = 58) -> some View
 How tall the text field should be ⬇️⬆️, in points. Defaults to 58. 
.style(backgroundColor: Color? = nil) -> some View
 The background color of the text field. πŸŸ₯🟩🟦 
.style(accentColor: Color? = .neonPurple) -> some View
 The cursor color of the text field. πŸ”΄πŸŸ’πŸ”΅ 
.style(font: UIFont? = nil) -> some View
 The text field's inputted text font. πŸ†— 
.style(paddingLeading: CGFloat = 25) -> some View
 The leading padding of the text field. ⏭ 
.style(cornerRadius: CGFloat = 6) -> some View
 The corner radius of the text field's background. γ€°οΈβž° 
.style(hasShadow: Bool = true) -> some View
 Whether or not the text field should have a shadow. β˜€οΈπŸ”¦

Community

Meet the developers behind iPhoneNumberTextField.


@benjaminsage

Download URL

iOS 13.0+

WatchOS 6.0+