New Phone Input QA Playground

This page is a staging sandbox for testing the new PhoneNumberField component.

For each example, please verify: country dropdown behavior, typing/formatting, validation message flow, and whether the resulting validDigits value matches expected submit payload.

1) Membership legacy value with fallback (recommended)

Simulates a legacy server value with 10 digits and no "+" (for example "6027705209"). `defaultCountryDialCode="1"` helps initialize this as US/CAN (+1) and prevents awkward country parsing.

Phone number

Initialized with

{
  "defaultValue": "6027705209",
  "defaultCountryDialCode": "1"
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""

2) Membership legacy value without fallback (comparison)

Same legacy input, but without `defaultCountryDialCode`. Use this case to compare how initialization can differ when no fallback is provided.

Phone number

Initialized with

{
  "defaultValue": "6027705209",
  "defaultCountryDialCode": null
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""

3) US/CAN only mode

Restricts country selection to USA/CAN and starts with US. This is useful for forms where only North America is supported.

Phone number

Initialized with

{
  "defaultValue": null,
  "defaultCountryDialCode": "1",
  "onlyCountries": "[\"us\",\"ca\"]",
  "initialCountry": "us"
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""

4) International value already in E.164

Server already provides a full international value (for example `+380...`). The field should initialize correctly without any fallback.

Phone number

Initialized with

{
  "defaultValue": "+380994762822",
  "defaultCountryDialCode": null
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""

5) Disabled / read-only state

Pre-filled value where editing must be blocked. Confirm that focus/typing/dropdown interactions are disabled.

Phone number

Initialized with

{
  "defaultValue": "12132313123",
  "defaultCountryDialCode": "1",
  "disabled": "true"
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""

6) Invalid input behavior (important for submit safety)

Type an invalid number (for example `213213213123`). You should see `rawInput` populated, but `validDigits` empty. This ensures invalid values are not accidentally submitted.

Phone number

Initialized with

{
  "defaultValue": null,
  "initialCountry": "us"
}

Current field state

{
  "rawInput": "",
  "digits": "",
  "validDigits": "",
  "e164": "",
  "countryIso2": "",
  "dialCode": "",
  "isValid": false,
  "errorCode": null,
  "errorMessage": ""
}

Submit payload (validDigits)

""