Support for phone number form fields

[gayathrirajendran]

The ux community has a strong advice on how phone number fields should appear. One of the often recommended practice is to show the country code as a flag selection. Understand that having a visual cue such as a flag is going to need an approach to make it accessible.

Please give an advice on phone number form fields. Is there a plan for any improvisation on input type"tel" like a clarity angular datepicker on type="date" ?

[coryrylan]

Using Clarity Core you can create a tel type input

https://stackblitz.com/edit/http-server-jalzuj?file=src%2Findex.html

<cds-input validate>
  <label>Phone Number</label>
  <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required value="123-456-7890" />
  <cds-control-action action="prefix" readonly aria-label="US phone number">🇺🇸 +1</cds-control-action>
  <cds-control-message error="patternMismatch">please enter US phone number (111-222-3333)</cds-control-message>
  <cds-control-message error="valueMissing">required</cds-control-message>
</cds-input>

[gayathrirajendran]

Am looking for a control that allows selection of country codes from a list. Looking like this visually https://intl-tel-input.com/ and with ways to remain accessible. Will figure it out with input groups.
Thanks for the answer @coryrylan !

[coryrylan]

You may be able to combine a library like that with our cds-control component. It allows you to provide a custom input but still leverage the clarity form layouts https://clarity.design/storybook/core/?path=/story/forms-control--page