Specialized inputs

AppPhoneNumberInput

A phone field with a searchable country-code picker built in — code and number in one control.

<app-phone-number-input label="Mobile" name="mobile" country="IN" />

A phone input captures a dialable number together with its country dial-code, from one control with a searchable country picker. <app-phone-number-input> is the one way to collect a phone number; never pair a separate country select with a plain input — the two drift out of sync.

It renders the shared <wui-phone> control and takes its look entirely from @webority/theme, so the Razor <app-phone-number-input> and the React <AppPhoneNumberInput> render an identical field on every Webority surface.

The country flags are an opt-in stylesheet, not part of wui-components. A site that renders this input links _content/Webority.Ui.Razor/css/webority-flags.css after the theme stylesheet, or imports @webority/theme/scss/flags once after wui-components in its own SCSS; without it every flag is an empty grey box.

Menu open motion product-wide via data-wui-menu-motion — pick one, then open the menus below

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it. Open the dial-code picker and type in its search box to try the full 245-country filter.

<app-phone-number-input name="phone" />
The picker is the real, shared controlcountry only sets the starting selection — the dial-code list itself (245 countries, search-filterable) lives once in <wui-phone>, so what you try here is byte-for-byte what ships on both surfaces.

Flag & dial code

Both parts of the country adornment are independently toggleable. show-flag hides the flag; show-dial-code hides the +country-code. The country picker (chevron) stays, so the country is still selectable even with both off.

Show / hide the flag and the +code
Default shows both. Turn either off for a cleaner field, or both off for a bare number input that still lets you switch country.
default — flag + code
show-flag="false"
show-dial-code="false"
both off
Show code 
<app-phone-number-input label="Mobile" show-flag="false" />             <!-- +91 only -->
<app-phone-number-input label="Mobile" show-dial-code="false" />        <!-- flag only -->
<app-phone-number-input label="Mobile" show-flag="false" show-dial-code="false" />

Sizes

Three sizes mirror AppInput's ladder — sm / md / lg. md is the default 44px control height; sm and lg step the height, corner radius, and text together so a phone field always matches the inputs beside it in a form.

sm · md · lg
Use the same size across a form row so the phone field lines up with its neighbouring inputs.
size="sm"
(default) — md
size="lg"
Show code 
<app-phone-number-input label="Mobile" size="sm" />
<app-phone-number-input label="Mobile" />             <!-- md — default -->
<app-phone-number-input label="Mobile" size="lg" />

Country code + number

The dial-code picker and the number share one field. country sets the starting country; value seeds the number and it posts under name.

A phone field
Pick the dial code from the built-in searchable list, then type the number — both in one control.
Show code 
<app-phone-number-input label="Mobile" name="mobile" country="IN" />
One control, not twoThe dial-code and number live in the same field, so the country and the digits can never get out of step. A separate country select next to a bare number input is exactly the desync this component removes.

Label and required

label renders above the field; required adds the asterisk marker. Always label a phone field — the country picker alone doesn't say what the number is for.

Labelled and required
required shows the mark; pair it with your form validation.
Show code 
<app-phone-number-input label="Contact number" name="contactNumber" country="IN" required="true" />

Error state

Pass error to show a field-level message below the control — the standard field-error treatment.

With a validation error
The message renders under the field in the theme's error style.
Enter a valid phone number
Show code 
<app-phone-number-input label="Phone" name="phone" country="IN" required="true" error="Enter a valid phone number" />

When to use

Use it when

  • Collecting an international phone number where the country dial-code matters.
  • A signup or contact form that needs a valid, dialable number.
  • You want one field the user can’t desync — code and number captured together.

Reach for something else when

  • The value is any non-phone text. → AppInput
  • It is a generic numeric value (quantity, amount). → AppInput
  • You need a date rather than a number. → AppDatePicker
  • You are picking from a fixed list of labels. → AppSelect

Best practices

Do
Default the country to the one most users will pick — fewer taps for the common case.
Don't
No label and no sensible default country — the user guesses what to enter and where.
Do
Enter a valid phone number
Surface validation inline with error, right under the field the user must fix.
Don't
Required with no error feedback — the user submits and is bounced with no clue why.

Every option

The whole surface of the component, one cell per value — a representative sample of the 245-country picker (the full list is search-filterable inside the picker itself), national vs. international seed values, and every field state.

country — a representative sample

country="IN"
country="US"
country="GB"
country="AE"
country="SG"
country="AU"
country="FR"
country="DE"
country="JP"
country="ZA"
country="BR"
country="NG"

value — national digits vs. international (e164)

(empty)
value="9876543210" — national digits, country="IN"
value="+919876543210" — same number, international
value="+14155552671" — international, picker follows to US
An international value carries its own countrySeed value with a leading + and the control parses the dial code and switches the picker to match, even when country was set to something else — the last cell above starts at country="IN" but resolves to the US.

state

(default)
required
disabled
disabled + value
error="…"
Enter a valid phone number
required + error
Enter a valid phone number

label

(default) — "Phone number"
label="Contact number"
label="" — no label, no accessible name

Attributes

AttributeTypeDefaultDescription
labelstringPhone numberField label above the control.
namestring—Form field name the number posts under; pairs with the label.
valuestring—Initial phone number.
countrystringdetectedInitial country ISO code, e.g. IN, US, GB. Omit it and the control starts on the viewer's country, from the browser's time zone, then its language, then IN.
sizesm | md | lgmdControl size — mirrors AppInput's ladder. sm/lg step the height, radius, and text.
placeholderstringEnter phone numberEmpty-state hint inside the number field.
requiredboolfalseAdds the required marker to the label.
errorstring—Field-level error message shown below the control.
disabledboolfalseDisable the control.
show-flagbooltrueShow the country flag in the adornment. Set false to hide it.
show-dial-codebooltrueShow the +country-code (e.g. +91) in the adornment. Set false to hide it; the country picker (chevron) stays.
input-classstring—Extra classes on the control itself (the wui-phone) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.