Phone number field with country selector (new component request)

[sheinatabone]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

New component. I design the IBM Registration forms on the URX squad and there is no phone number field with a country code selector. This component exists in Northstar and it would be helpful to have it added to the design carbon kit and system.

Is this issue related to a specific component?

Phone number field with country code

What did you expect to happen? What happened instead? What would you like to
see changed?

It just doesn't exist in the carbon design kit.

What browser are you working in?

Designing and building for all browsers.

What version of the Carbon Design System are you using?

Version 10

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Unified Registration Experience (URX), we have a release coming up in October.

Additional information

This is the phone number field in Northstar. (currently live - https://www.ibm.com/account/reg/us-en/signup?formid=urx-19774)

This is what I've created as a placeholder in my mockups

Add labels

Please choose the appropriate label(s) from our existing label list to ensure
that your issue is properly categorized. This will help us to better understand
and address your issue.

[asudoh]

@carbon-design-system/design What category do you think this request would fit in, core component, community-level component, BU/application-level component?

[sheinatabone]

I'm guessing core and community-level but I'm not sure how these three options are defined. Is there any place I can refer to that explains how these categories work?

[aagonzales]

I think it would be a core component. Not sure if it would be its own component or live as a variation under text input or form maybe?

[asudoh]

Thanks @aagonzales for your feedback! Technically I'm inclined to make it a separate component from text input given the additional UI the tel version has, but we can definitely put both in text input category in our design guide.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[sheinatabone]

Hi, I'm wondering if this field will be available soon. Also just commenting to prevent the bot from closing it.

[aagonzales]

Next steps:

• research different possibilities, all one input, separate inputs, etc.
• review options in next proposal triage meeting

[aagonzales]

Recommendation:

• All in one input field
• Country code selector included (smart default or auto geolocation)
  • https://github.com/jackocnr/intl-tel-input
• "Field masking" for formatting
  • http://igorescobar.github.io/jQuery-Mask-Plugin/

Possible visual direction:
Final spec will be needed once technical direction is chosen.

References:

• https://uxplanet.org/phone-number-field-design-best-practices-23957cbd86d5
• https://uxmovement.com/forms/bad-practices-on-phone-number-form-fields/

[aagonzales]

@sstrubberg this got brought up in the IBMer Experience Library meeting with the w3 folks (aka Juan's team). They have a need for this type of input and are interested in contributing.

Alicia Brooks and Juan are POCs

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[AdityaPimpalkar]

Hey folks! I looked into the docs to see if I can implement this using existing carbon components like Dropdown (to render the list of countries with phone code) and TexInput to enter the phone number.

I have implemented a similar component in the past using react-phone-number-input for country list and calling code, libphonenumber-js for validating phone number and country-flag-icons to render flag icons

https://www.npmjs.com/package/react-phone-number-input
https://www.npmjs.com/package/libphonenumber-js
https://www.npmjs.com/package/country-flag-icons

I'm interested in taking this up, let me know if this approach is okay with the team :)

cc @aagonzales @sstrubberg

[tay1orjones]

@AdityaPimpalkar Nice, thanks for your interest wanting to working on this!

Generally Carbon input components don't include validation. Ideally the component API would be open ended so that a user could use the libraries you mention, or they could use others, or write their own custom implementation.

Below are some thoughts I have on the implementation direction:

Naming

• This input is really similar to TextInput, but I think having this as it's own component makes the most sense. There are things on TextInput that don't make sense for type='tel', like the enableCounter.
• TelephoneInput seems like a reasonable name

Country code selector

• The country code selector could probably just use Select instead of Dropdown.
• It needs to be optionally rendered via a prop, hasCountryCode
• A countryCodeDefaultValue prop should be available for setting an initial value in the country code Select. This would be how someone implements their own "smart" selection based on geolocation or other means. It can default to us/+1

Formatting (field masking)

• Field masking for formatting should not be built in, but an onKeyDown (or similar) handler should be available so that masking/formatting can happen with whatever library or custom implementation the user chooses.

Flags

• Flags are out of scope and should not be used despite being included in the draft spec above in this thread.

In the storybook

• Include a default story with no props available as controls
• Include a playground story with all props available as controls
• Include a with country validation story showcasing:
  • Field masking/formatting by including a library as a devDependency if needed
  • "Smart" country code selection via geolocation or similar (it could support just a few limited countries like US/+1, UK/+44, India/+91, Brazil/+55)
  • Validation example via setting the pattern prop
• Document all this in an .mdx, particularly explaining the features of the "with country validation" story

Open questions:

• Do we need a fluid variant for this input?

[tay1orjones]

This also should be marked experimental at first and exported as unstable__TelephoneInput