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


iOS 13.0+

WatchOS 6.0+