Phone number inputs with country codes are one of those deceptively tricky UI components. Here's how to build a polished one with flag images and dial codes using ApogeoAPI. What We're Building A phone number input that: Shows a flag + country dial code in a dropdown Lets the user search countries by name Combines the dial code with the number the user types Is fully TypeScript-typed Step 1: Fetch Countries with Phone Codes The ApogeoAPI countries endpoint returns phone_code and flag_url for every country. // types.ts export interface Country { iso2 : string ; name : string ; phone_code : string ; flag_url : string ; } // useCountries.ts import { useEffect , useState } from ' react ' ; export function useCountries () { const [ countries , setCountries ] = useState ([]); useEffect (() => { fetch ( ' https://api.apogeoapi.com/v1/countries ' , { headers : { ' X-API-Key ' : process . env . NEXT_PUBLIC_APOGEO_KEY ! }, }) . then ( r => r . json ()) .…