PhoneInput
Every state of the country-aware phone field, then the form shapes it ships into.
States
One specimen per state, isolated. Answers whether the component renders.
∅
Placeholder is a real example number for the selected country
+14155552671 valid
+442071838750 valid
Trunk prefix: displays 020…, stores +4420…
+12115551234 incomplete
The Sentry issue's number class — formats, but never validates
+1211555 incomplete
Enter a valid phone number, including the country code.
Country trigger locks too, so the number cannot be rewritten
+525555555555 valid
countries={['US','CA','MX']}
∅
commonCountries={['US','MX','GB','CA']} — a 4-option decision
+5999182350 incomplete
Widest realistic trigger content
+442071838750 valid
In context
The five form shapes it actually ships into. Real validation, real submit.
Two-column row, optional phone beside email
customer-dashboard · organizations/[id]/people/RelatedPersonForm.tsx
Required phone, last field before submit
customer-dashboard · cards/new/VirtualCardForm.tsx
Conditionally required (RouteFusion toggle)
admin-dashboard · organizations/EditOrganizationForm.tsx
Dense fieldset beside tabular account + routing numbers
admin-dashboard · payment-instruments/UsWireInstrumentFields.tsx
Inside a ~400px sheet (popover containment)
admin-dashboard · system/route-fusion/entities/FixContactDetailsSheet.tsx