Accessibility: Full

Translations: Not Needed

Input Text (Inline)

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

Inline mode is opt-in

This page documents the inline variant of HLInput — the same component as the standard Text Input, rendered as plain 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

Set inline to render the input as plain text that becomes editable on focus. Combine with prefix-icon, suffix-icon, or disabled as needed.

Click to edit...

With prefix icon...

With suffix icon and tooltip...

Disabled inline input...

vue

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

vue

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

Custom Typography and Spacing

Inline mode supports custom font-size and font-weight tokens. Spacing in the preview state is now preserved, so values with repeated spaces render exactly as entered.

ID 001 A

vue

<template>
  <HLInput
    v-model:modelValue="value"
    inline
    :showInlineBottomBorder="true"
    font-size="var(--hr-font-size-3xl)"
    font-weight="var(--hr-font-weight-semibold)"
    placeholder="ID  001  A"
  />
</template>

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

const value = ref('ID  001  A')
</script>

Inline Input with Form Validation

Inline input integrated with form validation and error states.

Username *

Enter username...

vue

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

vue

<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 (<input>, or <textarea> when type="textarea").

Imports

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

Props

Inline Props

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

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`	`false`	If true, character count is shown
countGraphemes	`((value: string) => number) \| undefined`	`undefined`	Counts characters as graphemes (emoji/combining marks count as one) for the count display and maxlength enforcement
disabled	`boolean \| undefined`	`undefined`	If true, the input is disabled
autofocus	`boolean`	`false`	If true, the input is focused on mount
inputProps	`Object`	`undefined`	Additional attributes applied to the native input element
showPasswordOn	`'mousedown' \| 'click'`	`'click'`	Event that reveals the value when `type="password"`
prefixIcon	`string \| Component \| undefined`	`undefined`	Icon shown at the start — an image `src` or an icon component
suffixIcon	`string \| Component \| 'dropdown' \| undefined`	`undefined`	Icon shown at the end — an image `src`, an icon component, or `'dropdown'`
suffixIconTooltipContent	`string \| undefined`	`undefined`	Tooltip content of suffix icon
textAlign	`'start' \| 'center' \| 'end'`	`'start'`	Text and 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 the edit is confirmed (`Enter` or the confirm CTA), with the confirmed value. A `@blur` is emitted immediately after.
`@cancel`	`(value: string)`	Emitted when the edit is cancelled (`Esc` or the cancel CTA). The value is restored to the pre-edit value, which is passed as the parameter.

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	Custom action controls shown while editing in inline mode

Common Slots

Name	Parameters	Description
prefix	`()`	Content shown before the input
suffix	`()`	Content shown after the input

Methods

Inline Methods

Method	Type	Description
`triggerSavedIcon()`	`() => void`	Programmatically shows the saved icon. Useful for confirming after an async save.
`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

Input Text (Inline) ​

Basic Usage ​

Inline Editing with CTA Buttons ​

Custom Typography and Spacing ​

Inline Input with Form Validation ​

Inline Input with Edit Actions and Saved Icon ​

Accessibility ​

Imports ​

Props ​

Inline Props ​

Common Props ​

Emits ​

Inline Emits ​

Common Emits ​

Slots ​

Inline Slots ​

Common Slots ​

Methods ​

Inline Methods ​

Common Methods ​