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.

Inline mode is opt-in

This page documents the inline variant of HLInputPhone — the same component as the standard Input Phone, rendered as read-only text that turns into an editable field on click. There is no separate component or import; you get this behavior by setting the inline prop to true. Without it, the input renders as the standard bordered field.

Basic Usage

Inline phone input that renders as text and becomes editable on focus.

+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>

Bottom Border

showInlineBottomBorder controls whether a bottom border is drawn under the field while editing. It defaults to true. Set :show-inline-bottom-border="false" for a borderless edit that keeps the number flush with the surrounding text.

Click either number to start editing and compare.

With bottom border (default)

+1 555-123-4567

Without bottom border

+1 555-123-4567

Vue

<template>
  <!-- Bottom border while editing (default) -->
  <HLInputPhone inline v-model:countryCode="countryCode" v-model:value="phone" />

  <!-- Borderless inline edit -->
  <HLInputPhone
    inline
    :show-inline-bottom-border="false"
    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 a saved icon. Toggle showSavedIcon from your @confirm handler to flash a checkmark after saving.

(555) 123-4567

Vue

<template>
  <HLInputPhone
    inline
    :showInlineCTA="true"
    :showSavedIcon="isSaved"
    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 isSaved = ref(false)

const handleConfirm = value => {
  // Show the saved icon, then clear it after 2 seconds
  isSaved.value = true
  setTimeout(() => {
    isSaved.value = false
  }, 2000)
  console.log('Phone confirmed:', value)
}

const handleCancel = () => {
  isSaved.value = false
  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, HLIcon } 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	Shows a checkmark icon to indicate a saved state. Toggle it from your @confirm handler to flash the icon after saving.
fontSize	string	var(--hr-font-size-lg)	Font size of the displayed text in inline mode
fontWeight	string	var(--hr-font-weight-normal)	Font weight of the displayed text in inline mode

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'	inherits form	Size of the input. Falls back to the surrounding HLForm / HLInputGroup size, then 'sm'.
format	'national' | 'international'	'national'	Format used for the value emitted by @update:value
dropdownHeight	string	'32rem'	Max height of the country picker dropdown

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
@keydown	(event: KeyboardEvent)	Emitted on keydown in the input

Slots

Inline Slots

Name	Description
edit-actions	Custom action controls shown while editing in inline mode

Other Slots

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

Methods

Name	Parameters	Returns	Description
focus	() => void	void	Focus the phone input
blur	() => void	void	Blur the phone input
clear	() => void	void	Clear the input value
select	() => void	void	Select the text in the input
scrollTo	() => void	void	Scroll the input into view