Phone input
A country picker with flags, a dial code that cannot be edited away, and as-you-type formatting. The value is E.164 — +32470123456 — or null while empty. Validation rules load per calling code on first interaction, so nothing is downloaded until the user reaches the field, and detail.valid is undefined until they arrive.
Basic usage
+32
Value: null
—<BsPhoneInput value={phone} defaultCountry="be" inputLabel="Phone number" onValueChange={setPhone} onPhoneChange={setDetail}/>Localized country names
Names come from Intl.DisplayNames and are collated in the viewer's language at no download cost. Switch and reopen the picker — the order changes, because an alphabetical list of English names is not alphabetical to a Dutch reader.
Restricting and pinning countries
+31
Inside an input group
Tel
+32
{/* The group joins a whole phone input: its outer corners pair with the addon. */}<BsInputGroup> <span className="addon">Tel</span> <BsPhoneInput defaultCountry="be" /></BsInputGroup>