Elegant SwiftUI phone number textField.

Overview

iPhoneNumberField โ˜Ž๏ธ

Format phone numbers as they're typedโ€”entirely in SwiftUI. ๐Ÿ“ฑ

Get Started | Examples | Customize | Features | Install |

CI


And it's as easy as

iPhoneNumberField("Phone", text: $text)

CI

Get Started

  1. Install iPhoneNumberField.

  2. Add iPhoneNumberField to your project.

import SwiftUI
import iPhoneNumberField

struct ContentView: View {
    @State var text = ""

    var body: some View {
        iPhoneNumberField("Phone", text: $text)
    }
}
  1. Customize your iPhoneNumberField

Examples

Flags ๐Ÿ‡ฆ๐Ÿ‡ถ

Show the flag, and make it selectable, so your users can find their region.

import SwiftUI
import iPhoneNumberField

struct ContentView: View {
    @State var text = ""

    var body: some View {
        iPhoneNumberField(text: $text)
            .flagHidden(false)
            .flagSelectable(true)
            .font(UIFont(size: 30, weight: .bold, design: .rounded))
            .padding()
    }
}


Focus and unfocus ๐Ÿ”

Use iPhoneNumberField's optional binding and iTextField to programmatically change text field.

import SwiftUI
import iTextField
import iPhoneNumberField

struct ContentView: View {
    @State var nameText = ""
    @State var phoneText = ""
    @State var phoneEditing = false

    var body: some View {
        VStack {
            iTextField("Name", text: $nameText)
                .font(UIFont(size: 24, weight: .light, design: .monospaced))
                .padding()
                .onReturn { phoneEditing = true }
            iPhoneNumberField("Phone", text: $phoneText, isEditing: $phoneEditing)
                .font(UIFont(size: 24, weight: .light, design: .monospaced))
                .padding()
        }
    }
}



Custom style ๐ŸŽ€

Use our modifiers to create a fully customized field.

import SwiftUI
import iPhoneNumberField

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

    var body: some View {
        iPhoneNumberField("(000) 000-0000", text: $text, isEditing: $isEditing)
            .flagHidden(false)
            .flagSelectable(true)
            .font(UIFont(size: 30, weight: .light, design: .monospaced))
            .maximumDigits(10)
            .foregroundColor(Color.pink)
            .clearButtonMode(.whileEditing)
            .onClear { _ in isEditing.toggle() }
            .accentColor(Color.orange)
            .padding()
            .background(Color.white)
            .cornerRadius(10)
            .shadow(color: isEditing ? .lightGray : .white, radius: 10)
            .padding()
    }
}



Customize

iPhoneNumberField takes 2 required parameters: 1๏ธโƒฃ a String placeholder, and 2๏ธโƒฃ a binding to a phone number string. All customizations are built into our modifiers.

Example: Customize the text field style, and call a closure when editing ends.

iPhoneNumberField("", text: $text)
	.accentColor(Color.green)
	.clearsOnBeginEditing(true)
	.clearButtonMode(.always)
	.onEditingEnded { print("DONE โœ…") }

Use our exhaustive input list to customize your view.

Modifier Description
๐Ÿ”  .font(_:) Modifies the text fieldโ€™s font from a UIFont object.
๐ŸŽจ .foregroundColor(_:) Modifies the text color of the text field.
๐Ÿ– .accentColor(_:) Modifies the cursor color while typing on the text field.
๐ŸŒˆ .placeholderColor(_:) Modifies the entire placeholder color of the text field.
๐Ÿ– .numberPlaceholderColor(_:) Modifies solely the phone number placeholder color of the text field โ€“ without the country code.
๐Ÿ  .countryCodePlaceholderColor(_:) Modifies solely the country code placeholder color of the text field โ€“ without the phone number.
โ†”๏ธ .multilineTextAlignment(_:) Modifies the text alignment of a text field.
โ˜Ž๏ธ .textContentType(_:) Modifies the content type of a text field for implied formatting.
โ–ถ๏ธ .clearsOnEditingBegan(_:) Modifies the clear-on-begin-editing setting of a text field.
๐Ÿ‘† .clearsOnInsert(_:) Modifies the clear-on-insertion setting of a text field.
โŒ .clearButtonMode(_:) Modifies whether and when the text field clear button appears on the view.
โ˜‘๏ธ .textFieldStyle(_:) Modifies the style of the text field to one of Apple's three pre-designed styles.
๐Ÿ”Ÿ .maximumDigits(_:) Modifies the maximum number of digits the text field allows.
๐Ÿ‡ฆ๐Ÿ‡ถ .flagHidden(_:) Modifies whether the text field hides the country flag on the left ๐Ÿ‡ธ๐Ÿ‡ช ๐Ÿ‡น๐Ÿ‡ผ ๐Ÿ‡จ๐Ÿ‡ฌ .
๐Ÿ‡ธ๐Ÿ‡ฎ .flagSelectable(_:) Modifies whether the flag is selectable.
โž• .prefixHidden(_:) Modifies whether the country code prefix should be hidden. Note: prefix will only be shown if using the default placeholder (placeholder = nil).
๐Ÿ“ž .formatted(_:) Modifies whether the binding you pass as the text parameter gets formatted.
โœ‹ .disabled(_:) Modifies whether the text field is disabled.
โ–ถ๏ธ .onEditingBegan(perform: { code }) Modifies the function called when text editing begins.
๐Ÿ’ฌ .onNumberChange(perform: { code }) Modifies the function called when the user makes any changes to the text in the text field.
๐Ÿ’ฌ .onEdit(perform: { code }) Modifies the function called when the user makes any changes to the text in the text field.
๐Ÿ”š .onEditingEnded(perform: ({ code }) Modifies the function called when text editing ends.
๐Ÿ”˜ .onClear(perform: { code }) Modifies the function called when the user clears the text field.
โ†ช๏ธ .onReturn(perfom: { code }) Modifies the function called when the user presses return.
๐Ÿณ๏ธ .defaultRegion(_:) Receives a country string and selects the default phone format.

Features

Features
โ˜Ž๏ธ Validate, normalize and extract the elements of any phone number string.
๐Ÿ Fast. 1000 parses -> ~0.4 seconds.
๐Ÿ“š Best-in-class metadata from Google's libPhoneNumber project.
๐Ÿ† Fully tested to match the accuracy of Google's JavaScript implementation of libPhoneNumber.
๐Ÿ“ฑ Built for iOS. Automatically grabs the default region code from the phone.
๐Ÿ“ Editable (!) AsYouType formatter for UITextField.
๐Ÿ‡บ๐Ÿ‡ธ Convert country codes to country names and vice versa
โš™๏ธ Access to all native UITextField configurations
๐Ÿ” Searchable and customizable country code and name list
โˆž Many more features to discover

Install

You can use the Swift package manager to install iPhoneNumberField. Find Xcode SPM instructions here

dependencies: [
    .package(url: "https://github.com/MojtabaHs/iPhoneNumberField.git", .upToNextMajor(from: "0.5.0"))
]
Comments
  • No Placeholder

    No Placeholder

    I'm not able to see a placeholder text:

      iPhoneNumberField("Phone Number", text: $phoneNumber)
            .padding()
            .background(lightGreyColor)
            .cornerRadius(5.0)
            .padding(.bottom, 10)
    
    opened by JohnOHFS 13
  • [fix] Placeholder text

    [fix] Placeholder text

    Quick fix for the issue raised in #22. Looks likewithExamplePlaceholder overwrites the placeholder when called after the placeholder is initially set. I don't know if I'd qualify this as a true fix, but it definitely gets the job done for scenarios both with and without placeholder text.

    opened by dns-mcdaid 7
  • Using defaultRegion resets the country code on every focus

    Using defaultRegion resets the country code on every focus

    Description

    When using defaultRegion with a selectable country code flag, the country code resets back to the default every time the text field is focused.

    It should keep the selected country code and not reset back to the default.

    Repro

    iOS 15.0.4 iPhoneNumberField 0.6.1

    1. Select a country code other than the default
    2. Tap in the text field
    3. => The country code resets back to the default

    Code

    iPhoneNumberField(nil, text: $text)
                    .defaultRegion(Locale.current.regionCode)
                    .flagHidden(false)
                    .flagSelectable(true)
    
    opened by Zmetser 5
  • Infinity loop after removing the number typed

    Infinity loop after removing the number typed

    I'm having an issue with the new release where I'm typing my number, and after removing what I typed before the FIRST number removed there is what looks like an infinity loop, the keyboard is flickering and the screen isn't responsive anymore.

    I didn't encounter that on version 0.5.4 by the way.

    opened by elai950 5
  • Title not appearing on versions after 0.5.4

    Title not appearing on versions after 0.5.4

    I ran into an odd issue today where the title is not appearing on versions after 0.5.4. My local machine has cached 0.5.4 and I am able to see the title, but when Bitrise builds (clean everything) for me it is pulling down 0.6.1 and the title is missing.

    opened by brandtdaniels 5
  • Xcode complains with 'Modifying state during view update, this will cause undefined behavior.' when using iPhoneNumberField in SwiftUI project

    Xcode complains with 'Modifying state during view update, this will cause undefined behavior.' when using iPhoneNumberField in SwiftUI project

    Hello!

    Thanks for this awesome library.

    I would like to know how the above Warning can be fixed.

    XCode highlights the line isFirstResponder.wrappedValue = true inside these two functions:

    public func textFieldDidBeginEditing(_ textField: UITextField) {
        isFirstResponder.wrappedValue = true
        onBeginEditing(textField as! PhoneNumberTextField)
    }
    
    public func textFieldDidEndEditing(_ textField: UITextField) {
        isFirstResponder.wrappedValue = false
        onEndEditing(textField as! PhoneNumberTextField)
    }
    

    As mentioned in the Title, my project is a SwiftUI project.

    Any help you can provide will be highly appreciated.

    Julio

    opened by jsanzmex 4
  • How to get the country code?

    How to get the country code?

    I've started using the iPhoneNumberField and it works great for my need. However, I noticed that the text variable doesn't save the country code in it. How can I obtain the country code from iPhoneNumberField?

    opened by tobyloki 4
  • Does not accept leading zeros

    Does not accept leading zeros

    In Australia, we have state area codes beginning with zero

    eg (02) 9456 1234 (03) 9456 1234 (04) 9456 1234

    Mobiles are 0404 123 456 for example

    and this library isn't accepting the leading zeros, what am I doing wrong?

    opened by Dreamystify 4
  • .font no longer accepts UIFont, but Font doesn't work

    .font no longer accepts UIFont, but Font doesn't work

    When using the following as shown in the examples:

                .font(UIFont(size: 24, weight: .light, design: .monospaced))
    

    SwiftUI issues a compile-time error:

    Cannot convert value of type 'UIFont?' to expected argument type 'Font?'

    When I changed it to use Font as follows:

                     .font(.system( size: 24 ))
    

    The change does not take effect, it just shows the standard default font and size.

    I'd like to use this in a new project and will be buying the commercial license if I can get this working.

    Thanks!

    opened by dgable64 4
  • Questions about usage

    Questions about usage

    Thank you for producing this component. I am finding it very useful, but I have a few issues that I hope you can help me resolve.

    I have a โ€œpage-wideโ€ disabled state that disallows any text field from receiving input unless a specific button is pressed. So upon display of the page, if the user taps on a text field, nothing happens. I do this by using the following code for each textfield on my page:

    .disabled(editing ? false : true)
    

    When I use your iPhoneNumberField, I notice a few things.

    1. When I first display the page, the text color is gray. I would prefer for it to be standard label color, so I used the modifiers
                   .foregroundColor(.label)
                   .placeholderColor(.label)
    

    but they did not have any initial impact. If I navigate away from the page and them come back to it, the text is the correct label color.

    1. When i tap on the iPhoneNumberField it still gets input (and brings up a number keyboard) even though the field is supposed to be disabled.

    2. if I use the isEditing parameter and set it to my page-wide editing var then when the iPhoneNumberField is tapped, the state of the whole page editing is changed (which I understand)

    So the questions I have are as follows:

    1. How can I totally disable the iPhoneNumberField so that it does not allow any input when my editing var is false?

    2. How can I set the text color to always show up in the standard label color?

    Thank you for your help on these issues.

    opened by frios 3
  • Shouldn't country codes stay fixed when it's visible? (instead of just being placeholder)

    Shouldn't country codes stay fixed when it's visible? (instead of just being placeholder)

    Currently, my iPhoneNumberField has these modifiers:

    .flagHidden(false)
    .flagSelectable(true)
    .prefixHidden(false)
    

    And works like this: Feb-01-2021 12-06-49

    Shouldn't the country code be fixed (like the 3rd try I did in the gif), and the remaining job for the user is to enter his/her phone number only? (without the country code)

    opened by tadeha 3
  • Can't find keyplane that supports type 5 for keyboard

    Can't find keyplane that supports type 5 for keyboard

    Getting this error...

    === AttributeGraph: cycle detected through attribute 994328 ===
    === AttributeGraph: cycle detected through attribute 994328 ===
    === AttributeGraph: cycle detected through attribute 994328 ===
    Can't find keyplane that supports type 5 for keyboard
    === AttributeGraph: cycle detected through attribute 994328 ===
    === AttributeGraph: cycle detected through attribute 994328 ===
    === AttributeGraph: cycle detected through attribute 994328 ===
    
    opened by pec1985 0
  • iOS 16 Graph cycle errors

    iOS 16 Graph cycle errors

    Experiencing cycle errors in iOS 16.1, to be specific it is iPadOS 16.1, iPhoneNumberField worked marvellously before.

    === AttributeGraph: cycle detected through attribute 738376 ===

    opened by realszopen 2
  • Support iOS 16

    Support iOS 16

    Hey, thanks for your library

    multiples issues with iOS 16

    Selecting a flag won't work:

    Can't find keyplane that supports type 5 for keyboard iPhone-PortraitChoco-PhonePad; using 27154_PortraitChoco_iPhone-Complex-Pad_Default

    When typing the numbers the keyboard jumps [SwiftUI] Modifying state during view update, this will cause undefined behavior.

    opened by Dave181295 0
Owner
Seyed Mojtaba Hosseini Zeidabadi
Software Architect โ™› Senior iOS Developer Technical Lead โ™› UI/UX Designer โ™› iOS Programming Instructor โ™› More: https://www.linkedin.com/in/mojtabahosseini/
Seyed Mojtaba Hosseini Zeidabadi
Floating-textfield-swiftui - Floating textfield With SwiftUI

floating_textfield-swiftui Hey, Guys welcome to this tutorial. In this complete

null 1 Feb 11, 2022
Floating Label TextField for SwiftUI. FloatingLabelTextFieldSwiftUI

FloatingLabelTextFieldSwiftUI FloatingLabelTextFieldSwiftUI is a small and lightweight SwiftUI framework written in completely swiftUI (not using UIVi

Kishan Raja 337 Jan 2, 2023
A SwiftUI TextField with a prompt (or placeholder) that floats above the text field when active or not empty. Requires iOS 15.

FloatingPromptTextField A prompt is the label in a text field that informs the user about the kind of content the text field expects. In a default Tex

Emilio Pelรกez 43 Nov 3, 2022
A floating label style for SwiftUI's TextField.

FloatingLabelTextFieldStyle A floating label style for TextField with support for displaying error messages. Requirements iOS 15.0+ macOS 12.0+ Instal

Red Davis 13 Aug 22, 2022
An optional TextField Replacement for SwiftUI

TextInputView A TextField Replacement In his excellent YouTube tutorial series on Building SwiftUI Components, Peter Friese (@peterfriese on Twitter)

Stewart Lynch 6 Aug 9, 2022
DTTextField is a custom textfield with floating placeholder and error label

DTTextField Introduction DTTextField is a UITextField library with floating placeholder and error label. Floating placeholder inspired from JVFloatLab

Dhaval Thanki 310 Jan 5, 2023
A custom TextField with a switchable icon which shows or hides the password and enforce good password policies

PasswordTextField A custom TextField with a switchable icon which shows or hides the password and enforces good password policies, written in Swift. โญ

Chris Jimenez 304 Dec 29, 2022
Simple placeholder move textfield

PlaceholderTextField Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 11.0 o

null 6 Mar 9, 2022
This is the demo repository for having floating TextField in swift UI

ed-floating-field-swiftui This is the demo repository for having floating TextField in swift UI The inputs fields should not be empty Validations for

Patrick 1 May 26, 2022
TextField with DropDown support using UIPickerView

IQDropDownTextField TextField with DropDown support using UIPickerView Installing Install using cocoapods. Add in your Podfile: pod 'IQDropDownTextFie

Mohd Iftekhar Qurashi 301 Jun 29, 2022
TextField with smart suggestion

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

Neil Francis Ramirez Hipona 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

Nikita Ermolenko 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.

Alexander Shoshiashvili 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

Edgar ลฝigis 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

Nguyen Duc Thinh 7 Aug 28, 2022
A Swift framework for parsing, formatting and validating international phone numbers. Inspired by Google's libphonenumber.

PhoneNumberKit Swift 5.3 framework for parsing, formatting and validating international phone numbers. Inspired by Google's libphonenumber. Features F

Roy Marmelstein 4.7k Dec 29, 2022
VKPinCodeView is simple and elegant UI component for input PIN. You can easily customise appearance and get auto fill (OTP) iOS 12 feature right from the box.

Features Variable PIN length Underline, border and custom styles The error status with / without shake animation Resetting the error status manually,

Vladimir Kokhanevich 95 Nov 24, 2022
๐Ÿ” An elegant search controller which replaces the UISearchController for iOS (iPhone & iPad) .

?? An elegant search controller for iOS. QQ chat room Features Support a variety of hot search style Support a variety of search history style Support

mamba 3.8k Jan 8, 2023
SwiftUI TextEdit View - A proof-of-concept text edit component in SwiftUI & CoreText.

A proof-of-concept text edit component in SwiftUI & CoreText. No UIKit, No AppKit, no UITextView/NSTextView/UITextField involved.

Marcin Krzyzanowski 80 Dec 1, 2022