Accessibility: Partial

Translations: Not Needed

Migration Guide: Full

Text Area

Text area component. A type of HLInput that allows for multi-line text input.

Note

HLInput with type="textarea" is Textarea component.

Default

Please Input

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area" type="textarea" />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

All Sizes

lg

Please Input

md

Please Input

sm

Please Input

xs

Please Input

2xs

Please Input

3xs

Please Input

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-lg" size="lg" type="textarea" />
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-md" size="md" type="textarea" />
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-sm" size="sm" type="textarea" />
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-xs" size="xs" type="textarea" />
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-2xs" size="2xs" type="textarea" />
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-3xs" size="3xs" type="textarea" />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Show Count with Max Limit

Please Input

0 / 100

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-3xs" size="3xs" type="textarea" showCount :maxlength="100" />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Disabled

Please Input

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-disabled" size="3xs" type="textarea" disabled />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Custom font styles

Please Input

Vue

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    id="example-text-area-custom-font"
    size="3xs"
    type="textarea"
    font-size="var(--hr-font-size-4xl)"
    font-weight="var(--hr-font-weight-semibold)"
  />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Loading

Please Input

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-loading" size="3xs" type="textarea" loading />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Readonly

This is read only text

Vue

<template>
  <HLInput :modelValue="'This is read only text'" id="example-text-area-readonly" size="3xs" type="textarea" readonly />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
</script>

Clearable

Please Input

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-clearable" size="3xs" type="textarea" clearable />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

showCount

Please Input

0

Vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-show-count" size="3xs" type="textarea" showCount />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Inline Textarea

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.

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>

Imports

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

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
inline	boolean	false	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
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

Types

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

// Input sizes
type HLInputSize = 'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'

Type Details

AutosizeConfig

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

Emits

Name	Default	Trigger
@update:modelValue	(value: string | [string, string]) => 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
@confirm	(value: string) => void	When an inline input is confirmed using the confirm CTA
@cancel	(value: string) => void	When an inline input is cancelled using the cancel CTA

Slots

Name	Parameters	Description
default	()	The default content slot
prefix	()	Prefix content slot
suffix	()	Suffix content slot
edit-actions	()	Inline input only: Custom action buttons that appear on hover when not editing (e.g., icons)

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