Phone Input
Last Updated: September 2026Phone inputs are information capture fields that are formatted for and only accept phone number entries.
Source CodeAnatomy
link- 1Country picker
- 2Tel input
- 3Field shell
Variants
linkDefault
US default country with placeholder 000-000-0000.
Default country
defaultCountry sets the uncontrolled initial country code.
Controlled country
country + onCountryChange for controlled selection.
Disabled
disabled blocks both the country Select and the tel Input.
Usage Guidelines
linkWhen to use
- •To collect international phone numbers with a country dial-code picker.
- •When users may switch countries without leaving the field.
- •As a labeled Field control for contact or account forms.
When not to use
- •For plain text or email — use Input.
- •When country is fixed and you only need a tel box — a plain Input type="tel" may suffice.
- •For choosing from a short fixed list of numbers — use Select.
Use synthetic example numbers in placeholders and demos.
Don't put real patient or staff phone numbers in docs or fixtures.
Pair with a clear label and submit action in forms.
Don't reassemble country + tel from Select and Input — use PhoneInput.
Behaviors
linkCountry selection
- •Uncontrolled: defaultCountry (defaults to "US") and internal state.
- •Controlled: pass country and onCountryChange.
- •Built-in country list includes common locales; override with countries.
Composition
- •Renders Input type="tel" with a start adornment containing Select.
- •Select uses triggerContent for the flag + chevron; items include leading flags.
- •Other Input props (size, disabled, value, onChange, etc.) pass through.
Content Guidelines
linkPlaceholders
- •Show a local format example for the selected country (e.g. 555-0100).
- •Prefer 555 / fictional ranges in all examples.
Country list
- •Keep country names clear and recognizable.
- •When customizing countries, include code, dialCode, flag, and name.
Accessibility
linkText & Labels
- •Provide a visible Field.Label such as 'Phone'.
- •Placeholder is not a substitute for a label.
ARIA attributes
- •Country Select and tel Input are separately focusable.
- •disabled applies to both the picker and the text control.
Keyboard Support
- •Tab → move between country trigger and tel input.
- •On the Select trigger: Enter / Space / arrows open and navigate the list.
WCAG Compliance Standards
FAQs
linkHow do I change the default country?
Set defaultCountry="GB" (or another ISO code) for uncontrolled use.
Can I supply my own countries?
Pass countries=[{ code, dialCode, flag, name }, …]. Values use the country code.
Where is the dial code stored?
Country is selected by code (e.g. US). Read dialCode from the matching CountryOption when composing the full E.164 value.