Dowe Views Documentation

FORM

Phone

Phone pairs a searchable Dowe-owned country catalog with digit-only local-number binding and explicit dial-code form storage. It uses the same inset, anchored popover, compact search, and horizontal country rows on every target.

PLAYGROUND

Collect an international contact number

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

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

bind stores only local-number digits so applications can validate and format them independently.

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

signal contactPhone value:""

Phone 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 digits for the local number." variant:"outlined" scheme:"primary" size:"lg" name:"mobile-phone"
  validate rule:"required" message:"Enter a mobile phone number."
  validate rule:"phone" message:"Enter a valid phone number."

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.

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

Phone 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. Floating labels stay anchored over the local-number input rather than the country selector.

Emergency contactEnter a complete local number for Mexico.

Verified phoneRemove phone verification before changing this number.

The base heights are 32, 40, and 48; labelFloating adds 8 logical units without changing the country trigger.

Phone validates the bound local-number string after blur or country-popover close; the first failing message belongs to the combined control.

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

Digit-only local value

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

TARGETS

Dowe popovers

Web, SwiftUI, Compose, and the Android launcher use the Dowe anchored dropdown surface with matching inset, width, compact search, horizontal flag/name/dial rows, empty feedback, selection, and vector country flags.

API

Props

Phone 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