Dowe

FORM

PhoneField

PhoneField pairs a searchable Dowe-owned country catalog with local-number binding and explicit dial-code form storage.

PLAYGROUND

Collect an international contact number

Search the country popover, keep Colombia and nearby markets at the top, and store the selected dial code separately from the bound local number.

Mobile phoneChoose the country first, then enter the local number.

bind stores only the local number so applications can validate and format it independently.

dialCodeName gives the generated form a stable companion field for the selected calling code.

signal contactPhone value:""

PhoneField bind:contactPhone country:"CO" dialCodeName:"contactDialCode" priorityCountries:"CO,US,MX,BR,ES" label:"Mobile phone" placeholder:"300 123 4567" searchPlaceholder:"Search country or dial code" emptyText:"No country matches this search" loadingText:"Loading countries" helpText:"Choose the country first, then enter the local number." variant:"outlined" scheme:"primary" size:"lg" name:"mobile-phone"

REGIONAL WORKFLOWS

Prioritize the countries that matter

The selected country appears first, followed by priorityCountries and then the rest of the built-in catalog.

Billing contactNorth American markets stay at the top of the selector.

Support callbackRegional support teams can start from a focused catalog.

PhoneField value:"4155550136" country:"US" dialCodeName:"billingDialCode" priorityCountries:"US,CA,MX" label:"Billing contact" variant:"soft" scheme:"secondary" size:"md"

PhoneField country:"ES" dialCodeName:"supportDialCode" priorityCountries:"ES,GB,DE" label:"Support callback" variant:"line" scheme:"success" size:"md"

STATES AND DENSITY

Keep validation attached to the whole number

Error feedback belongs to the combined country and number control, while disabled preserves both values visibly.

Emergency contactEnter a complete local number for Mexico.

Verified phoneRemove phone verification before changing this number.

Small

Medium

Large

BEHAVIOR

One country catalog, portable selection

Dowe owns country metadata, ordering, search, dial-code storage, selected state, and the shared circle-flags SVGs across generated targets.

CATALOG

Searchable countries

Country names, flags, and dial codes come from the deterministic Dowe-owned catalog.

VALUE

Separated fields

bind owns the local number and dialCodeName identifies the generated companion form value.

TARGETS

Native popovers

Web, SwiftUI, Compose, and the Android launcher preserve priority ordering, search, empty feedback, selection, and vector country flags.

API

Props

PhoneField also accepts the applicable common spacing, sizing, visibility, accessibility, and shadow props.

Prop	Type	Default
No data There are no records to display

No data