Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Input Phone (Inline)

Minimalist phone input that appears as text until focused, perfect for in-place editing.

Required Prop

Set inline to true to enable inline mode.

Basic Usage

+1 555-123-4567

Vue

<template>
  <HLInputPhone id="input-phone-inline" inline v-model:countryCode="countryCode" v-model:value="phone" />
</template>
<script setup lang="ts">
  import { HLInputPhone } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const phone = ref('+91845403166')
  const countryCode = ref('IN')
</script>

Inline with Edit Actions and CTA

Inline phone input with confirm and cancel actions, custom edit actions, and saved icon.

(555) 123-4567

Vue Template

<template>
  <HLInputPhone
    ref="inputRef"
    inline
    :showInlineCTA="true"
    v-model:countryCode="countryCode"
    v-model:value="phone"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <!-- Always visible suffix icons -->
    <template #suffix>
      <HLIcon>
        <MessageQuestionCircleIcon />
      </HLIcon>
    </template>

    <!-- Hover-only edit actions -->
    <template #edit-actions>
      <HLIcon @click="handleEdit">
        <Edit02Icon />
      </HLIcon>
      <HLIcon>
        <PhoneIcon />
      </HLIcon>
      <HLIcon @click="handleMail">
        <Mail01Icon />
      </HLIcon>
    </template>
  </HLInputPhone>
</template>

Script Setup

import { HLInputPhone, HLIcon } from '@platform-ui/highrise'
import { Edit02Icon, PhoneIcon, Mail01Icon, MessageQuestionCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
import { ref } from 'vue'

const phone = ref('+1 555-123-4567')
const countryCode = ref('US')
const inputRef = ref(null)

const handleConfirm = value => {
  // Trigger saved icon using the exposed method (accessed via inputRef)
  inputRef.value?.inputRef?.triggerSavedIcon()
  // Clear saved icon after 2 seconds
  setTimeout(() => {
    inputRef.value?.inputRef?.clearSavedIcon()
  }, 2000)
  console.log('Phone confirmed:', value)
}

const handleCancel = () => {
  console.log('Phone edit cancelled, value automatically restored')
}

const handleEdit = () => {
  console.log('Edit action clicked')
}

const handleMail = () => {
  console.log('Mail action clicked')
}

Accessibility

• Label the phone field with aria-labelledby / aria-label, and reference format instructions via aria-describedby.
• When the country picker opens, keep the trigger's aria-expanded / aria-controls values synchronized with the dial-code list id.
• Mark validation issues with aria-invalid="true" on the text input.

Imports

import { HLInputPhone, HLForm, HLFormItem } from '@platform-ui/highrise'

Props

Inline Props

Name	Type	Default	Description
inline	boolean	false	Must be set to true to enable inline mode. Whether the input is inline
showInlineCTA	boolean	false	Shows confirm/cancel buttons during inline editing
showInlineBottomBorder	boolean	true	Controls bottom border visibility in inline mode
showSavedIcon	boolean	false	Deprecated: Use triggerSavedIcon() and clearSavedIcon() methods instead to programmatically control saved icon visibility

Other Props

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the input
countryCode	string | undefined	undefined	Two-letter country code (ISO 3166-1 alpha-2).
value	string | undefined	undefined	Phone number value
disabled	boolean	false	Whether the input is disabled
disableCountryPicker	boolean	false	Whether to disable the country selection dropdown
autocomplete	boolean	false	Enable/disable browser autocomplete
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'sm'	Size of the input
format	'national' | 'international'	'nationalFormat'	Phone number format
dropdownHeight	string	'32rem'	Height of the dropdown
showSavedIcon	boolean	false	Deprecated: Use triggerSavedIcon() and clearSavedIcon() methods instead to programmatically control saved icon visibility

Emits

Inline Emits

Name	Parameters	Description
@confirm	(value: string)	Emitted when user confirms the input in inline mode. The confirmed value is passed as the parameter
@cancel	() => void	Emitted when user cancels the input in inline mode. The value is automatically restored to the previous value

Common Emits

Name	Parameters	Description
@internationalFormat	(phone: string)	Emitted when phone number is formatted internationally
@nationalFormat	(phone: string)	Emitted when phone number is formatted nationally
@isValid	(valid: boolean)	Emitted when phone number validation status changes
@update:countryCode	(code: string)	Emitted when country code changes
@update:value	(value: string)	Emitted when phone number value changes
@focus	(event: FocusEvent)	Emitted when the input receives focus
@blur	(event: FocusEvent)	Emitted when the input loses focus
@scrollTo	(event: Event)	Emitted when scrolling occurs in the input

Slots

Inline Slots

Name	Description
edit-actions	Content to show on hover in inline mode

Other Slots

Name	Description
suffix	Content to show after the input (always visible)

Methods

Inline Methods

Method	Type	Returns	Description
triggerSavedIcon()	() => void	void	Programmatically triggers the saved icon to appear. Useful for showing confirmation after async operations
clearSavedIcon()	() => void	void	Programmatically clears the saved icon. Useful for resetting the saved state

Common Methods

Name	Parameters	Returns	Description
focus	() => void	void	Focus the input number element
blur	() => void	void	Blur the input number element
clear	() => void	void	Clear the input number element
select	() => void	void	Select the input number element
scrollTo	() => void	void	Scroll to the input number element