Phone Input

A phone number input with an integrated country selector. Formats digits automatically according to the selected country's pattern, validates the number, and auto-detects the country when a full international number is pasted.

Quick Start

Basic phone input with label, helper text, and two-way value binding.

Basic

Phone number

Value: —

With helper text

Phone number

We'll use this to contact you

Required

Phone number

Country Selection

Control which countries appear in the dropdown. A single-country list renders a static prefix with no dropdown.

All countries (default)

Phone number

Limited countries (MD, RO, US)

Phone number

Single country — static prefix

Phone number

+373

When exactly one country is provided, the selector becomes a static non-interactive prefix.

Default country preselected

Phone number

razor

<!-- Limited countries -->
<FodPhoneInput AllowedCountries="new() { PhoneCountryData.MD, PhoneCountryData.RO, PhoneCountryData.US }"
               @bind-Value="_phone" />

<!-- Single country — static prefix, no dropdown -->
<FodPhoneInput AllowedCountries="new() { PhoneCountryData.MD }"
               @bind-Value="_phone" />

<!-- Preselect a default country -->
<FodPhoneInput DefaultCountry="PhoneCountryData.RO" @bind-Value="_phone" />

States

Disabled and read-only states prevent user interaction with both the input and the country selector.

Default

Phone number

Disabled

Phone number

Read-only

Phone number

razor

<FodPhoneInput Disabled="true" Value="60123456" />

Status Variants

Convey validation state with visual status variants applied to the input.

Default

Phone number

+373

Helper message

Success

Phone number

+373

Number verified

Warning

Phone number

+373

Please double-check

Destructive

Phone number

+373

Invalid number

razor

<FodPhoneInput Status="InputVariant.Success" HelperText="Number verified" />

Country Change Tracking

Use ActiveCountryChanged to react when the user selects a different country, and access FullNumber for the complete international number.

ActiveCountryChanged callback

Phone number

Active country: Moldova (+373)

FullNumber (dial code + digits)

Phone number

Raw digits: — Full number: —

razor

<FodPhoneInput @ref="_phoneRef"
               ActiveCountryChanged="OnCountryChanged"
               @bind-Value="_phone" />

@code {
    private FodPhoneInput? _phoneRef;

    // Country switched by the user
    private void OnCountryChanged(PhoneCountryConfig country)
    {
        Console.WriteLine($"Switched to {country.DisplayName} {country.DialCode}");
    }

    // Full international number: dial code + digits
    private string FullNumber => _phoneRef?.FullNumber ?? string.Empty;
}

Auto Country Detection

Pasting a full international number (e.g. +40723000000) automatically detects and switches to the matching country.

Paste a full international number

Phone number

Detected country: —

Try pasting: +40723123456 (Romania), +16505550100 (US), +4407911123456 (UK)

API Reference

FodPhoneInput component properties and their descriptions.

No properties defined.