Country-aware personal phone input with international parsing and formatting.
PhoneInput provides a reusable, token-driven control for product interfaces. Available in the React renderer; no page-specific styling is required.
Country-aware personal phone input with international parsing and formatting.
<VStack align="stretch" gap={12} fullWidth>
<PhoneInput aria-label="Contact number" defaultCountry="ID" placeholder="0812 3456 7890" />
<PhoneInput aria-label="Disabled phone number" defaultCountry="US" defaultValue="4155552671" disabled />
</VStack>import { PhoneInput, VStack } from "@froggdesign/enter-ui-react";Try the interactive PhoneInput preview on the New components page.
Label the telephone input independently of the country menu button. The non-modal EnterUI country menu supports arrow-key navigation, typeahead, Enter to choose, and Escape to close without locking page scroll; the telephone input remains a native input. International paste selects a supported country; valid numbers format on blur, while typing preserves the caret and raw entry. Changing country reinterprets national digits under the new calling code. Empty or invalid strings are not silently discarded.
Parsing uses libphonenumber-js/max metadata. Validity means a matching numbering pattern, not ownership, reachability, or SMS verification. Short service codes and extensions are outside this personal-number control's contract.
value, defaultValue: editable display string, controlled or uncontrolled.onValueChange(value, details): emits { country, valid, e164? }; E.164 is supplied only when metadata validates the number. An unfinished input stays editable.country, defaultCountry: two-letter country code; default is ID.onCountryChange(country): country selection callback.countries: available country codes, defaulting to ID, US, GB, SG, AU, and BD. An empty list falls back to these defaults.countryLabel: accessible name for the country selector, default Phone country.invalid: explicit error appearance. disabled and readOnly disable country switching.type, value, defaultValue, and onChange; ref points to the telephone input. Native name submits the display string. Use details.e164 when saving normalized data.The country selector and telephone field use the same medium (8px) control radius as other EnterUI inputs. The country menu uses the shared EnterUI DropdownMenu styling instead of the browser-native popup and does not affect the surrounding page shell.
The component owns its token-based styles in the shared EnterUI stylesheet. Import @froggdesign/enter-ui-react/styles.css once at the application root. Theme boundaries supply light and dark colors; use public props and composition in consuming pages.