I have a form that allows the user to input their geographic origin. The origin is broken down into 4 specific categories: City, State, Province, Country. The province input field would apply more specifically to those outside the US. So for example most people that live in the United States would enter their city, state, and country vs. someone from the UK would enter only their city, province, and country.
The design challenge I'm facing is displaying one form that's applicable to both but showing only what's necessary to that particular user. I already have my validations setup where if a city is entered a province or state is required (a country is required at minimum).
What I'm currently thinking is having the form show as follows:
As far as an initial layout
If the user checks Non U.S. Resident? then the second input form would dynamically change to this:
Is there a better way to accomplish this that I'm not aware of in regards to input pairing, arrangement, or a different layout for that matter? My only concern is the width of the Country input field. Should I use a form this long for something that requires a mid-level range of characters (10-20)? I'm open to any suggestions.