Build a region selector

A region selector pairs a dropdown with the phone field, where the dropdown sets the region and the field holds the digits after the calling code.

List the regions

REGION_CODES and getCallingCodeForRegion supply the dropdown rows. Display names come from the platform:

import { REGION_CODES, getCallingCodeForRegion } from '@telixon/core';

const displayNames = new Intl.DisplayNames(['en'], { type: 'region' });

const options = REGION_CODES.map((region) => ({
  region,
  callingCode: getCallingCodeForRegion(region),
  name: displayNames.of(region),
}));
// [{ region: 'AC', callingCode: '247', name: 'Ascension Island' }, ...]

When the product accepts only some number types, keep the list to regions that assign them:

import { regionSupportsNumberTypes } from '@telixon/core';

const mobileRegions = REGION_CODES.filter((region) => regionSupportsNumberTypes(region, ['MOBILE']));

Show a placeholder

getPlaceholders turns the selected region into the field’s placeholder:

import { getPlaceholders } from '@telixon/core';

getPlaceholders('US', 'MOBILE')?.national; // '(201) 555-0123'

Wire the dropdown to the field

With the calling code kept out of the field, the controller takes its region from the dropdown. Call setRegion on the dropdown’s change event and write the returned state back:

import { createInternationalInputController } from '@telixon/core';

const controller = createInternationalInputController({
  defaultRegion: 'US',
  display: { callingCodeInInput: false },
});

controller.setRegion('CA');
controller.insert('', '6045550132', 0, 0);
// { value: '604-555-0132', region: 'CA', selectionStart: 12, selectionEnd: 12 }

controller.getPhoneNumber().formatE164(); // '+16045550132'

Pin the field to the selection

setRegionFilter pins resolution to the dropdown’s choice. Digits from any other region stop validating:

controller.setRegionFilter(['CA']);
controller.getPhoneNumber().isValid(); // true

controller.setValue('2015550123');
controller.getPhoneNumber().isValid(); // false, a US number under a Canadian filter

The full member list is in the InputController reference.