mui7-phone-number Demo
@mmerlone/mui7-phone-number is a phone number input component for MUI v7+ with auto-formatting, country selection, and full TypeScript support.
It is built on top of MUI's TextField and renders a country flag selector as a start adornment alongside a formatted international phone input.
This package is a fork of mui-phone-number, updated to support the latest React 19 and MUI 7 versions.
Basic
Minimal setup with automatic formatting and the full country selector.
Preferred Countries
Pins Brazil, Italy, Sweden, Germany, and France to the top of the dropdown.
Only Countries
Restricts the selector to Great Britain, Spain, France, Germany, and Italy.
Exclude Countries
Hides specific countries from the picker while keeping the rest available.
Region Filtering
Filters the list down to Europe-focused options.
Custom Validation
Uses the raw digit callback to validate numbers between 10 and 15 digits.
Enter between 10 and 15 digits.
Localization
Overrides country names in the dropdown using the package localization map.
Native Select
Switches the country selector to a native select element.
Disable Dropdown
Keeps a fixed country while leaving the phone input editable.
Hide Country Code
Leaves the selected country active while hiding the dial code in the input.
Disabled State
Shows the component as a read-only field with an initial value.
Forced Error
Applies the standard MUI error state for form-level validation feedback.
Example server-side or form-level error state.