OrionPhone

<o-phone> displays a phone number field.

The number will be formatted depending on the selected country.

Usage

PhoneMobile PhoneFlag

Favorites countries

Using a reference seen on orion phone, you can access orion select instance _country to enter your favorite countries.

You have to use the Orion.Country type to create your list of favorite. You can find all country here.

PhonePlayground

VModels

vModelVModelType = undefined

phoneCountryCodestring | undefined = undefined

phoneNumberstring | undefined = undefined

Props

autofocusboolean = undefined

clearableboolean = undefined

clearToNullboolean = undefined

disabledboolean = undefined

donetypingnumber = undefined

flagboolean = undefined

forceLabelFloatingboolean = undefined

inheritValidationStateboolean = undefined

labelstring = undefined

mobileboolean = undefined

placeholderstring = undefined

prefixFontIconstring = undefined

prefixIconOrion.Icon = undefined

readonlyboolean = undefined

requiredboolean = undefined

selectOnFocusboolean = undefined

sizeOrion.Size = 'md'

suffixFontIconstring = undefined

suffixIconOrion.Icon = undefined

typestring = 'tel'

validationstring | ((val: any) => boolean) | Orion.Validator.Rule | Orion.Validation.Rule | boolean = undefined

validationErrorMessagestring = undefined

Events

focus

FocusEvent

blur

FocusEvent

input

T

change

T

clear

PublicInstance

isValidMobile

() => boolean

_country

() => {
	getSearchTerm: () => string | undefined;
	setSearchTerm: (val?: string) => string | undefined;
	setFavoritesOptions: (val: unknown[]) => unknown[];
	triggerSearchAsync: (term?: string) => Promise<void>;
	togglePopover: () => void;
	blur: import("lodash").DebouncedFuncLeading<(e?: FocusEvent, selection?: boolean) => false | undefined>;
	popoverIsShown: () => boolean | undefined;
	hasBeenFocus: () => boolean;
	isFocus: () => boolean;
	focus: () => void;
	clear: () => void;
	setHasBeenFocus: (value: boolean) => void;
	isValid: () => boolean;
	_input: () => HTMLInputElement | undefined;
	sharedState: () => {
		hasBeenFocus: boolean;
		isFocus: boolean;
		isAutoFilled: boolean;
	};
} | undefined

_orionInput

() => (HTMLInputElement & {
	valueDisplay: () => string;
	hasBeenFocus: () => boolean;
	isFocus: () => boolean;
	focus: () => void;
	blur: import("lodash").DebouncedFuncLeading<() => void>;
	clear: () => void;
	setHasBeenFocus: (value: boolean) => void;
	isValid: () => boolean;
	_input: () => HTMLInputElement | undefined;
	sharedState: () => {
		hasBeenFocus: boolean;
		isFocus: boolean;
		isAutoFilled: boolean;
	};
}) | undefined

hasBeenFocus

() => boolean

isFocus

() => boolean

focus

() => void

blur

Lodash.debounce

clear

() => void

setHasBeenFocus

(value: boolean) => void

isValid

() => boolean

_input

() => HTMLInputElement | undefined

sharedState

() => {
	hasBeenFocus: boolean;
	isFocus: boolean;
	isAutoFilled: boolean;
}