New Component: Phone Number Input

Announcements
1

Hi all! We are excited to announce the beta launch of the Phone Number Input component!

With PhoneNumberInput, you can now have inputs that automatically format phone numbers as you type. The input has a country dropdown selector, where the user can choose which country they want their phone number to be from. The default country that the dropdown selects will be based on the user’s IP address.

Some things to note about this new component:

  • Currently, the input only formats international phone numbers correctly. If there is enough feature request for us to implement a domestic (local) formatting option, we will consider adding this in as well.
  • There are currently multiple ways to access formatting options from the component:
    • .value: this is the raw, unformatted value of the input
    • .formattedValue: this maps 1-1 with the formatted value that the input displays
    • .parsedValue: this offers more advanced formatting options:
      • domesticNumber: the domestic/local formatting of the phone number
      • internationalNumber: the international formatting of the phone number
      • selectedCountryCode: the country that is selected in the input dropdown (this is the country that the formatting is based on)
      • uri: the international URI for the phone number
      • valid: whether the phone number is valid or not, based on the selectedCountryCode
      • Example usage: phoneNumber1.parsedValue.domesticNumber

Please leave a comment in this thread or DM me if you’d like me to turn this feature on for your org! (Note: available now on cloud, coming to on premise soon). You are also welcome to leave a comment in this thread or DM me with any feedback you have.

Happy building!

– Darya

phoneNumberInput_forumGif

9 Likes
2

I don't understand. You have said it doesn't format domestic numbers but you listed domesticNumber in parsedValue?

3

Hi @Darya_Verzhbinsky, great work!

This is perfect, and we could use this right now, can you enable this for me?

Thanks!

1 Like
4

This looks great! Is it possible to enable it in a free on-prem instance?

Oh, never mind. You already said not.

5

Hey all! Unfortunately, we had to revert cloud to v 3.17 (unrelated to this new component). This means you won't have access to the component anymore. We should be rolling 3.18 back out soon, and I'll definitely update this thread again once that happens, as well as turn on the feature for those who I haven't yet done so for!

6

Great question! I should have been more clear.

What I mean by "it doesn't format domestic numbers" is that the automatic formatting as you type in the input does not yet support domestic numbers. But if you want to programatically access the domestic formatting of the number, you can do so by doing {{ phoneNumber1. parsedValue.domesticNumber }}, for example.

1 Like
7

Hey all! We are back to 3.18 as of yesterday afternoon, the input should be back on for people!

1 Like
9

Hey @Darya_Verzhbinsky is this available to everyone on cloud yet? If not can my org please have access

1 Like
10

I need this feature. Can you please turn it on for us?

11

@ali_jafery @bot_Sensei What are your orgs? I can then turn on the feature for your entire org!

12

@Darya_Verzhbinsky our org is gorodeo

1 Like
13

@ali_jafery Done! :white_check_mark:

1 Like
14

Hi Darya,

Can we enable this component for my org "hopsndrops" ?

1 Like
15

@mitchmess Done! :white_check_mark:

16

Our org is botsensei

17

works for retool self host?

18

@bot_Sensei Done! :white_check_mark:

19

@agaitan026 Unfortunately, it's not ready for on premises yet. Will update this thread once we have idea of when it will be.

1 Like
20

Thank you

21

Could I please have access to this feature? Thank you!

1 Like