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>

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>

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

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
@onBlur	(): void	When the input is blurred
@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

Slots

Name	Parameters	Description
default	()	The default content slot
prefix	()	Prefix content slot
suffix	()	Suffix content slot

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