Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Input Text (Inline)

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

Required Prop

Set inline to true to enable inline mode.

Basic Usage

Click to edit...

With prefix icon...

With suffix icon and tooltip...

Disabled inline input...

<template>
  <!-- Basic inline input -->
  <HLInput v-model:modelValue="value" inline placeholder="Click to edit..." :showInlineBottomBorder="false" />

  <!-- With prefix icon -->
  <HLInput v-model:modelValue="value" inline :prefix-icon="Mail01Icon" placeholder="With prefix icon..." :showInlineBottomBorder="false" />

  <!-- With suffix icon and tooltip -->
  <HLInput
    v-model:modelValue="value"
    inline
    :suffix-icon="HelpCircleIcon"
    suffix-icon-tooltip-content="This is a help tooltip"
    placeholder="With suffix icon and tooltip..."
    :showInlineBottomBorder="false"
  />

  <!-- Disabled state -->
  <HLInput v-model:modelValue="value" inline disabled placeholder="Disabled inline input..." :showInlineBottomBorder="false" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'
import { Mail01Icon, HelpCircleIcon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Inline Editing with CTA Buttons

Inline input with confirm and cancel actions for explicit user control.

Click to edit with confirm/cancel...

With bottom border...

With prefix icon...

<template>
  <!-- Basic inline input with confirm/cancel CTAs -->
  <HLInput
    v-model:modelValue="value"
    inline
    showInlineCTA
    placeholder="Click to edit with confirm/cancel..."
    :showInlineBottomBorder="false"
  />

  <!-- With bottom border -->
  <HLInput v-model:modelValue="value" inline showInlineCTA placeholder="With bottom border..." />

  <!-- With prefix icon -->
  <HLInput
    v-model:modelValue="value"
    inline
    showInlineCTA
    :prefix-icon="Mail01Icon"
    placeholder="With prefix icon..."
    :showInlineBottomBorder="false"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLInput } from '@platform-ui/highrise'
import { Mail01Icon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
</script>

Inline Input with Form Validation

Inline input integrated with form validation and error states.

Username *

Enter username...

<template>
  <HLFormItem label="Username" required validation-status="error">
    <HLInput v-model:modelValue="value" placeholder="Enter username..." inline />
  </HLFormItem>
</template>

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

const value = ref('')
</script>

Inline Input with Edit Actions and Saved Icon

Inline input with custom edit actions and animated saved confirmation icon.

Enter your message with icons...

<template>
  <HLInput
    ref="inputRef"
    v-model:modelValue="value"
    inline
    showInlineCTA
    placeholder="Enter your message with icons..."
    :showInlineBottomBorder="false"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <template #suffix>
      <HLIcon :size="18" color="var(--gray-400)">
        <MessageDotsCircleIcon />
      </HLIcon>
    </template>
    <template #edit-actions>
      <HLIcon :size="18" color="var(--gray-600)" @click="handleEditClick">
        <Edit02Icon />
      </HLIcon>
      <HLIcon :size="18" color="var(--success-600)" @click="handlePhoneClick">
        <PhoneIcon />
      </HLIcon>
      <HLIcon :size="18" color="var(--gray-600)" @click="handleMailClick">
        <Mail01Icon />
      </HLIcon>
    </template>
  </HLInput>
</template>

<script setup>
import { ref } from 'vue'
import { HLInput, HLIcon } from '@platform-ui/highrise'
import { Edit02Icon, PhoneIcon, Mail01Icon, MessageDotsCircleIcon } from '@gohighlevel/ghl-icons/24/outline'

const value = ref('')
const inputRef = ref(null)

const handleConfirm = () => {
  // Trigger saved icon using the exposed method
  inputRef.value?.triggerSavedIcon()
  // Clear saved icon after 2 seconds
  setTimeout(() => {
    inputRef.value?.clearSavedIcon()
  }, 2000)
}

const handleCancel = () => {
  // Value is automatically restored by the component
  console.log('Input cancelled, value restored')
}

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

const handlePhoneClick = () => {
  console.log('Phone action clicked')
}

const handleMailClick = () => {
  console.log('Mail action clicked')
}
</script>

Accessibility

• Connect the field to visible labels via id / for or supply aria-label when the label is hidden.
• Reference helper and error copy through aria-describedby, and toggle aria-invalid when validation fails.
• Manage suggestion lists with aria-expanded, aria-controls, and (when applicable) aria-autocomplete so assistive tech understands the relationship.
• Use inputProps prop to pass attributes to the internal <input> element.

Imports

import { HLInput } from '@platform-ui/highrise'

Props

Inline Props

Prop	Type	Default	Required	Description
inline	boolean	false	true	Must be set to true to enable inline mode. Transforms the input into an inline editable field that blends with surrounding content until activated
showInlineCTA	boolean	false	false	Adds confirm (✓) and cancel (×) buttons that appear during editing, requiring explicit user action to save or discard changes
showInlineBottomBorder	boolean	true	false	Controls the visibility of the bottom border in inline mode - useful for matching different design contexts
showSavedIcon	boolean	false	false	Deprecated: Use triggerSavedIcon() and clearSavedIcon() methods instead to programmatically control saved icon visibility

Common Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
modelValue	string	''	The value of the input
type	'text' | 'textarea' | 'password' | 'tel' | 'email' | 'url'	'text'	The type of the input
readonly	boolean	false	If true, the input is read-only
rows	number	3	Number of rows for textarea
clearable	boolean	false	If true, a clear button is shown
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'sm'	The size of the input
placeholder	string | undefined	undefined	Placeholder text for the input
autosize	boolean | AutosizeConfig | undefined	undefined	If true, the textarea auto-resizes
maxlength	number | undefined	undefined	Maximum number of characters allowed
minlength	number | undefined	undefined	Minimum number of characters required
loading	boolean | undefined	undefined	If true, a loading indicator is shown
showCount	boolean | undefined	undefined	If true, character count is shown
disabled	boolean | undefined	undefined	If true, the input is disabled
inputProps	Object	undefined	Additional properties for the input element
showPasswordOn	'mousedown' | undefined | 'click'	undefined	Event to show the password in password input
prefixIcon	string | undefined	undefined	src of the image to render
suffixIcon	string | undefined	undefined	src of the image to render
suffixIconTooltipContent	string | undefined	undefined	Tooltip content of suffix icon
textAlign	'start' | 'center' | 'end'	start	Text,Placeholder alignment of the input
fontSize	string | undefined	undefined	Font size of the input
fontWeight	string | undefined	undefined	Font weight of the input

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	Default	Trigger
@update:modelValue	(value: string | [string, string] | number | null) => void	When the input value changes
@change	(value: string) => void	When native change event is fired
@focus	(FocusEvent) => void	When the input is focused
@blur	(FocusEvent) => void	When the input is blurred
@keydown	(event: KeyboardEvent) => void	When the keydown event is fired

Slots

Inline Slots

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

Common Slots

Name	Parameters	Description
default	()	The default content slot
prefix	()	Prefix content slot
suffix	()	Suffix content slot

Methods

Inline Methods

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

Common Methods

Method	Type	Description
focus()	() => void	Focuses the input
blur()	() => void	Blurs the input
select()	() => void	Selects the input
scrollTo(value: number)	(value: number) => void	Scrolls the input to a specific position