RTL Support: Full

Accessibility: Full

Translations: Not Needed

Try in Cursor

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

A basic textarea created by setting type="textarea" on HLInput.

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

The textarea supports six sizes via the size prop: lg, md, sm, xs, 2xs, and 3xs.

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

Setting showCount with maxlength displays the current character count against the maximum allowed.

Please Input

0 / 100

vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-max-limit" 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

Setting disabled prevents user interaction with the textarea.

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

The fontSize and fontWeight props override the textarea text styling.

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

Setting loading displays a loading indicator on the textarea.

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

Setting readonly displays the value but prevents editing.

This is read only text

vue

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

Clearable

Setting clearable shows a clear button to reset the textarea value.

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>

Show Character Count

Setting showCount displays the current character count without a maximum limit.

Please Input

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 inputModelValue1 = ref('')
</script>

Placeholder and Rows

Set placeholder for hint text shown when empty, and rows to control the initial visible height.

Enter your description

vue

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

Autosize

Setting autosize makes the textarea grow and shrink to fit its content. Pass an AutosizeConfig object to bound the growth with minRows and maxRows.

This textarea will grow as you type...

vue

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    id="example-text-area-autosize"
    type="textarea"
    placeholder="This textarea will grow as you type..."
    :autosize="{ minRows: 2, maxRows: 6 }"
  />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Min and Max Length

Use minlength and maxlength to constrain the number of characters the textarea accepts.

Please Input

0 / 200

vue

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

Text Alignment

The textAlign prop aligns the text and placeholder to start, center, or end.

Centered text

vue

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

Prefix and Suffix

For a simple icon, the prefixIcon and suffixIcon props render one without needing a slot. Add suffixIconTooltipContent to show a tooltip on the suffix icon.

Type something

vue

<template>
  <HLInput
    v-model:modelValue="inputModelValue"
    id="example-text-area-icons"
    type="textarea"
    placeholder="Type something"
    :prefixIcon="Mail01Icon"
    :suffixIcon="InfoCircleIcon"
    suffixIconTooltipContent="Helpful tooltip content"
  />
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { Mail01Icon, InfoCircleIcon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

For custom content beyond a single icon, use the prefix and suffix slots instead.

To:

Add your notes

Draft

vue

<template>
  <HLInput v-model:modelValue="inputModelValue" id="example-text-area-slots" type="textarea" placeholder="Add your notes">
    <template #prefix>
      <span style="display: inline-flex; align-items: center; gap: 4px; color: var(--gray-500);">
        <HLIcon :size="16"><Mail01Icon /></HLIcon>
        To:
      </span>
    </template>
    <template #suffix>
      <span style="padding: 2px 8px; border-radius: 4px; background: var(--primary-50); color: var(--primary-700); font-size: 12px;">
        Draft
      </span>
    </template>
  </HLInput>
</template>
<script setup lang="ts">
  import { HLInput, HLIcon } from '@platform-ui/highrise'
  import { Mail01Icon } from '@gohighlevel/ghl-icons/24/outline'
  import { ref } from 'vue'
  const inputModelValue = ref('')
</script>

Event Testing

The textarea emits @update:modelValue, @change, @focus, @blur, and @keydown. This example logs the events as you interact with it.

Interact to see events

Event Log:

No events logged yet. Interact with the textarea above.

vue

<template>
  <HLInput
    v-model:modelValue="eventsModelValue"
    id="example-text-area-events"
    type="textarea"
    placeholder="Interact to see events"
    @focus="addEventLog('@focus')"
    @blur="addEventLog('@blur')"
    @update:modelValue="val => addEventLog('@update:modelValue → ' + val)"
    @change="val => addEventLog('@change → ' + val)"
    @keydown="e => addEventLog('@keydown → ' + e.key)"
  />
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Interact with the textarea above.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">{{ log.timestamp }}: {{ log.event }}</div>
  </div>
</template>
<script setup lang="ts">
  import { HLInput } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const eventsModelValue = ref('')
  const eventLog = ref<{ event: string; timestamp: string }[]>([])
  const addEventLog = (event: string) => {
    eventLog.value.unshift({ event, timestamp: new Date().toLocaleTimeString() })
    if (eventLog.value.length > 5) {
      eventLog.value.pop()
    }
  }
</script>

Methods

Access the exposed methods (focus(), blur(), select(), scrollTo()) via a template ref.

Use the buttons to control focus

vue

<template>
  <HLInput ref="methodsInputRef" v-model:modelValue="inputModelValue" id="example-text-area-methods" type="textarea" placeholder="Use the buttons to control focus" />
  <div style="display: flex; gap: 8px; margin-top: 8px;">
    <HLButton variant="secondary" @click="methodsInputRef?.focus()">Focus</HLButton>
    <HLButton variant="secondary" @click="methodsInputRef?.blur()">Blur</HLButton>
    <HLButton variant="secondary" @click="methodsInputRef?.select()">Select</HLButton>
  </div>
</template>
<script setup lang="ts">
  import { HLInput, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const methodsInputRef = ref(null)
  const inputModelValue = ref('')
</script>

Design Guidelines

Input components use a box-shadow to render their focus ring. Box-shadows render outside the element's bounds and may be clipped by any ancestor using overflow: hidden (e.g. Tab Panels or Dropdown Menus).

To prevent this, add a small gutter padding to the component's wrapper to ensure there is enough room for the focus ring to render without being cut off.

vue

<div class="p-[3px]">
  <!-- Your component here -->
</div>

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

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

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

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

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

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

Text Area ​

Default ​

All Sizes ​

lg

md

sm

xs

2xs

3xs

Show Count with Max Limit ​

Disabled ​

Custom font styles ​

Loading ​

Readonly ​

Clearable ​

Show Character Count ​

Placeholder and Rows ​

Autosize ​

Min and Max Length ​

Text Alignment ​

Prefix and Suffix ​

Event Testing ​

Methods ​

Design Guidelines ​

Accessibility ​

Imports ​

Props ​

Types ​

Emits ​

Slots ​

Methods ​

Text Area

Default

All Sizes

Show Count with Max Limit

Disabled

Custom font styles

Loading

Readonly

Clearable

Show Character Count

Placeholder and Rows

Autosize

Min and Max Length

Text Alignment

Prefix and Suffix

Event Testing

Methods

Design Guidelines

Accessibility

Imports

Props

Types

Emits

Slots

Methods