Migrating from ghl-ui InputPhone to HighRise InputPhone

This guide will help you migrate from the ghl-ui InputPhone component to the new HighRise InputPhone component.

Component Implementation Changes

Import Changes

- import { UIInputPhone } from '@gohighlevel/ghl-ui'
+ import { HLInputPhone } from '@platform-ui/highrise'

Basic Usage Changes

- <UIInputPhone
-   id="phone-input"
-   v-model:value="phoneNumber"
-   v-model:countryCode="countryCode"
-   @isValid="isPhoneValid = $event"
-   @nationalFormat="nationalFormat = $event"
-   @internationalFormat="internationalFormat = $event"
- />
-
+ <HLInputPhone
+   id="phone-input"
+   v-model:value="phoneNumber"
+   v-model:countryCode="countryCode"
+   @isValid="isPhoneValid = $event"
+   @nationalFormat="nationalFormat = $event"
+   @internationalFormat="internationalFormat = $event"
+ />

Form Integration Changes

- <UIForm :model="formData" :rules="rules">
-   <UIFormItem label="Phone Number" path="phone">
-     <UIInputPhone
-       id="form-phone"
-       v-model:value="formData.phone"
-       v-model:countryCode="formData.countryCode"
-       @isValid="handlePhoneValidation"
-     />
-   </UIFormItem>
- </UIForm>
-
+ <HLForm :model="formData" :rules="rules">
+   <HLFormItem label="Phone Number" path="phone" required>
+     <HLInputPhone
+       id="form-phone"
+       v-model:value="formData.phone"
+       v-model:countryCode="formData.countryCode"
+       @isValid="handlePhoneValidation"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

Required & Renamed

ghl-ui Prop	HighRise Prop	Notes
id	id	Still required
value	value	Use v-model:value; emits update:value with formatted value
countryCode	countryCode	Use v-model:countryCode; emits update:countryCode

Additional HighRise Props

Prop	Type	Default	Description
format	'national' | 'international'	'national'	Formatting style for emitted value
disableCountryPicker	boolean	false	Lock country selector
dropdownHeight	string	'32rem'	Height of country dropdown
size	HLInputSize	inherits form	Input size
inline	boolean	false	Render inline styling
showInlineCTA	boolean	false	Show inline confirm/cancel affordance
showInlineBottomBorder	boolean	true	Control inline bottom border
showSavedIcon	boolean	false	Show saved-state icon
clearable	boolean	true	Allow clearing the value
autocomplete	boolean	false	Apply autocomplete="tel" when true
fontSize	string	var token	Typography override
fontWeight	string	var token	Typography override

Events

• update:value (formatted based on format)
• update:countryCode
• internationalFormat
• nationalFormat
• isValid
• confirm, cancel, blur, focus, keydown

Examples

Basic Usage

<template>
  <HLInputPhone
    id="basic-phone"
    v-model:value="phoneNumber"
    v-model:countryCode="countryCode"
    placeholder="Enter phone number"
    @isValid="isPhoneValid = $event"
    @internationalFormat="intl = $event"
    @nationalFormat="natl = $event"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputPhone } from '@platform-ui/highrise'

const phoneNumber = ref('')
const countryCode = ref('US')
const isPhoneValid = ref(false)
const intl = ref('')
const natl = ref('')
</script>

With Validation

<template>
  <HLForm :model="formData" :rules="rules">
    <HLFormItem label="Phone Number" path="phone" required>
      <HLInputPhone
        id="validated-phone"
        v-model:value="formData.phone"
        v-model:countryCode="formData.countryCode"
        :format="'international'"
        @isValid="val => (formData.isPhoneValid = val)"
      />
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { reactive } from 'vue'
import { HLForm, HLFormItem, HLInputPhone } from '@platform-ui/highrise'

const formData = reactive({
  phone: '',
  countryCode: 'US',
  isPhoneValid: false,
})

const rules = {
  phone: {
    required: true,
    validator: () => {
      if (!formData.isPhoneValid) return new Error('Please enter a valid phone number')
    },
    trigger: ['blur', 'input'],
  },
}
</script>

Inline Styling Variant

<template>
  <HLInputPhone
    id="inline-phone"
    v-model:value="phoneNumber"
    v-model:countryCode="countryCode"
    inline
    :show-inline-c-t-a="true"
    :show-inline-bottom-border="false"
    :show-saved-icon="true"
    :clearable="false"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputPhone } from '@platform-ui/highrise'

const phoneNumber = ref('')
const countryCode = ref('US')
</script>

Best Practices

1. Always provide id; the component requires it.
2. Use v-model:value for the formatted number and v-model:countryCode to stay in sync with the selector.
3. Pick format="international" when storing values for global audiences; use national for local display only.
4. Disable the picker with disable-country-picker when country changes are not allowed.
5. Rely on @isValid plus form rules for validation feedback; the component emits validity for every change.
6. Turn off clearable when the value should only be edited intentionally (e.g., in inline review modes).
7. Use autocomplete when you want the browser to suggest stored phone numbers.
8. Keep dropdown height reasonable (dropdown-height) to avoid scroll jank on shorter viewports.

Additional Notes

1. Emitted update:value is already formatted according to the current country and format setting.
2. The component inherits size from parent HLFormItem/HLInputGroup when size is not provided.
3. Prefix uses the country picker by default; set disable-country-picker to lock it.
4. All other DOM attributes are applied to the underlying HLInput via v-bind="$attrs" in the component.