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

9-digit ABA number for the beneficiary bank.

Beneficiary

Inside a ~400px sheet (popover containment)

admin-dashboard · route-fusion/entities/FixContactDetailsSheet.tsx