Rxova
Skip to content

UsePhoneInputResult

clear: () => void;

Empty the number, keeping the selected country. Present on every input hook in the suite.

void


countries: Country[];

The list the picker should show, in order.


country:
| Country
| undefined;

The currently selected country.


details: PhoneDetails;

Everything onChange reports.


disabled: boolean;

flagFor: (iso2) => string;

Flag emoji for an ISO code.

ParameterType
iso2string

string


handleBlur: (event) => void;
ParameterType
eventFocusEvent<HTMLElement>

void


handleFocus: (event) => void;
ParameterType
eventFocusEvent<HTMLElement>

void


handleInputChange: (event) => void;
ParameterType
eventChangeEvent<HTMLInputElement>

void


ids: object;
hidden: string;
input: string;
label: string;

Only referenced when label is a node rather than a string.

root: string;
select: string;
validity: string;

inputRef: object;

Structural rather than RefObject: in @types/react 18 RefObject.current is readonly, in 19 it is mutable. Declaring the shape keeps this assignable under both, which matters because react >= 18 is a peer.

current: HTMLInputElement | null;

international: boolean;

True when the user is typing an explicit +… number.


maxLength: number;

The character cap after coercion. Always set — an unusable value falls back to the default. Put it on your own <input> when rendering headless; the hook enforces it either way.


nameFor: (iso2) => string;

Localised country name, from Intl.DisplayNames.

ParameterType
iso2string

string


readOnly: boolean;

selectCountry: (iso2) => void;
ParameterType
iso2string

void


text: string;

What the input displays — grouped, and carrying + in international mode.


touched: boolean;

Focus has left the whole field at least once. Feedback about a number being the wrong length is only fair after that: every number is “too short” while it is still being typed.


value: string;

The canonical value: + + calling code + national digits, or ''.