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

Name
vModelVModelType = undefined
phoneCountryCodestring | undefined = undefined
phoneNumberstring | undefined = undefined

Props

Name
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
typeany = 'tel'
validationany = undefined
validationErrorMessagestring = undefined

PublicInstance

Name
Type
isValidMobile
() => boolean
_country
() => { getSearchTerm: () => string | undefined; setSearchTerm: (val?: string) => string | undefined; setFavoritesOptions: (val: unknown[]) => unknown[]; triggerSearchAsync: (term?: string) => Promise<void>; blur: import("lodash").DebouncedFuncLeading<(e?: FocusEvent, selection?: boolean) => false | 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; }