Phone number field with country selector (new component request)

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.

[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]

Next steps:

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