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

Click to edit...

Vue

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

Vue

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    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>

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

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

Type Details

AutosizeConfig

• minRows: Minimum number of rows for textarea
• maxRows: Maximum number of rows for textarea

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