Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Text Area (Inline)

Minimalist textarea that appears as text until focused, perfect for in-place editing. The inline textarea will show an ellipsis and tooltip for long overflowing text.

Required Prop

Set inline to true to enable inline mode and set type to textarea.

Basic Usage

Inline textarea that displays as plain text and becomes editable on focus.

Click to edit...

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    id="example-textarea-inline"
    type="textarea"
    inline
    placeholder="Click to edit..."
    :showInlineBottomBorder="false"
    rows="3"
  />
</template>

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

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

Inline Textarea with CTA Buttons

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

Click to edit with confirm/cancel...

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    id="example-textarea-inline-cta"
    type="textarea"
    inline
    showInlineCTA
    placeholder="Click to edit with confirm/cancel..."
    :showInlineBottomBorder="false"
    rows="3"
  />
</template>

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

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

Custom Typography

The fontSize and fontWeight props are applied in both the display preview and the editable textarea, so larger text tokens render consistently as the user switches between viewing and editing.

First line Second line Third line

<template>
  <HLInput
    v-model:modelValue="typographyModelValue"
    id="example-textarea-inline-typography"
    type="textarea"
    inline
    showInlineCTA
    :showInlineBottomBorder="true"
    rows="3"
    font-size="var(--hr-font-size-3xl)"
    font-weight="var(--hr-font-weight-semibold)"
    placeholder="Click to edit..."
  />
</template>

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

const typographyModelValue = ref('First line\nSecond line\nThird line')
</script>

Collapsed Preview and Overflow

In display mode the preview clamps to rows lines and truncates overflowing content with an ellipsis, showing the full text in a tooltip on hover. Click to edit and the complete multiline value becomes visible in the textarea.

First line of the note Second line of the note Third line that overflows the two visible rows Fourth line hidden until you edit Fifth line hidden until you edit Sixth line hidden until you edit Seventh line hidden until you edit Eighth line hidden until you edit Ninth line hidden until you edit Tenth line hidden until you edit

<template>
  <HLInput
    v-model:modelValue="collapsedPreviewModelValue"
    id="example-textarea-inline-collapsed"
    type="textarea"
    inline
    :showInlineBottomBorder="false"
    rows="2"
    placeholder="Click to edit..."
  />
</template>

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

const collapsedPreviewModelValue = ref('First line of the note\nSecond line of the note\nThird line that overflows the two visible rows\nFourth line hidden until you edit\nFifth line hidden until you edit\nSixth line hidden until you edit\nSeventh line hidden until you edit\nEighth line hidden until you edit\nNinth line hidden until you edit\nTenth line hidden until you edit')
</script>

Edit Actions and Saved Icon

Use the edit-actions slot to show custom actions on hover, and the @confirm / @cancel emits to react to the user's choice. On confirm, call the exposed triggerSavedIcon() and clearSavedIcon() methods via a template ref to flash a saved confirmation.

Enter your message with icons...

<template>
  <HLInput
    ref="editActionsRef"
    v-model:modelValue="value"
    id="example-textarea-inline-edit-actions"
    type="textarea"
    inline
    showInlineCTA
    placeholder="Enter your message with icons..."
    :showInlineBottomBorder="false"
    rows="3"
    @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 lang="ts">
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 editActionsRef = ref(null)

const handleConfirm = () => {
  // Trigger saved icon using the exposed method
  editActionsRef.value?.triggerSavedIcon()
  // Clear saved icon after 2 seconds
  setTimeout(() => {
    editActionsRef.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

Name	Type	Default	Description
inline	boolean	false	Must be set to true to enable inline mode. Transforms textarea into inline editable field
showInlineCTA	boolean	false	Shows confirm/cancel buttons during 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

Common Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
type *	'text' | 'textarea' | 'password' | 'tel' | 'email' | 'url'	'text'	Input type. Set to 'textarea' for a multi-line inline text area
modelValue	string	''	The value 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
prefixIcon	string | Component | HTMLElement	undefined	Leading icon — an icon component (e.g. Mail01Icon), an image src string, or an element
suffixIcon	string | Component | HTMLElement | 'dropdown'	undefined	Trailing icon — an icon component, an image src string, an element, or 'dropdown'
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 text area
fontWeight	string | undefined	undefined	Font weight of the input text area

Types

// Configuration for auto-sizing textarea
interface AutosizeConfig {
  minRows?: number
  maxRows?: number
}

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	(value: string)	Emitted when user cancels the input in inline mode. The value is automatically restored to the previous 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	Content to show on hover 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 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