Mobile Number

A mobile number input is a specialized text field designed for capturing phone numbers in a standardized and user-friendly way. It combines country selection with number entry, ensuring correct formatting and reducing input errors.

Use this component when users must provide a valid phone or mobile number for authentication, verification, or contact purposes.

Common alternative names:
Phone Input, Telephone Field, Number Entry with Country Code

---

Variants

Standard

A mobile number input with hint text placeholder.

Preview

Code

const MobileNumber(
  hintText: 'Mobile number',
)

---

Floating Label

A mobile number input with a floating label that moves above the input when focused or filled.

Preview

Code

const MobileNumber(
  labelText: 'Mobile number',
)

---

Disabled

A mobile number input in disabled state that cannot be interacted with.

Preview

Code

const MobileNumber(
  hintText: 'Mobile number',
  isEnabled: false,
)

---

Properties

MobileNumber

Property	Type	Description
labelText	String?	The label text displayed above the input field.
hintText	String?	The hint text displayed inside the input field when empty.
validator	String? Function(String?)?	Custom validator function for the mobile number input. If null, uses default validation.
inputFormatters	List<TextInputFormatter>?	Custom input formatters. If null, uses digits-only formatter with country-based length limiting.
textInputType	TextInputType	The keyboard type for the input field. Defaults to TextInputType.phone.
autovalidateMode	AutovalidateMode?	When to automatically validate the input. Defaults to AutovalidateMode.onUserInteraction.
prefixWidget	Widget?	Custom prefix widget to display before the country selector.
dialogTitle	String	The title displayed in the country picker dialog. Defaults to 'Select Country'.
searchHint	String	The hint text displayed in the country picker search field.
controller	TextEditingController?	Text editing controller for the mobile number input.
prefixPadding	EdgeInsetsGeometry	Padding around the prefix icon (country selector).
onCountrySelected	void Function(Country)?	Callback function triggered when a country is selected.
isError	bool	Whether the input field should display in error state. Defaults to false.
isEnabled	bool	Whether the input field is enabled for user interaction. Defaults to true.