Skip to main content

Phone Input

Props

AttributeDescriptionType
labelSets input label.string
countryCodeAppendIconAdds an icon to the Country Code component.string
denseReduces the input height. Use it with the style prop.boolean
hideDetailsHides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.boolean \| string
localeSets the locale used for location.string
phoneAppendIconAdds an icon to the phone component.string
phoneNumberAutomatically filling in the phone number content after the prop is set.string
fullPhoneNumberIf data entry is to be done manually, the desired number is entered by adding the country code to the beginning.string
autoCompleteDisabledDisables data entry into autocomplete.boolean
outlinedApplies the outlined style to the input. Use it with the style prop.boolean
textFieldDisabledDisables data entry into text field.boolean
requiredIt shows an error message if the phone number field is left blank.boolean
visibleVisibility of PhoneInput component.boolean

Events

AttributeDescription
getPhoneDataUsed to capture phone number
changeEmitted when the value is changed and it runs
changeCountryCodeEmitted when country code is changed
inputEmitted when value is added

Component Samples

CountryCodeAppendIcon

image

FullPhoneNumber

image

Required

image