Text Area

Stable

A free-form text field that allows users to enter a sizeable amount of text, for example, descriptions or notes

<script setup lang="ts">
import { HTextArea } from '@holistics/design-system'
</script>
<template>
  <HTextArea
    class="w-[200px]"
    icon-left="info"
    icon-right="help-circle"
    top-text="Label"
    bottom-text="Description"
    placeholder="Placeholder"
  />
</template>

Examples

Disabled

<script setup lang="ts">
import { HTextArea } from '@holistics/design-system'
</script>
<template>
  <HTextArea
    class="w-[200px]"
    icon-left="info"
    icon-right="help-circle"
    top-text="Label"
    bottom-text="Description"
    placeholder="Placeholder"
    disabled
  />
</template>

Error

<script setup lang="ts">
import { HTextArea } from '@holistics/design-system'
</script>
<template>
  <HTextArea
    class="w-[200px]"
    icon-left="info"
    icon-right="help-circle"
    top-text="Label"
    bottom-text="Error message"
    placeholder="Placeholder"
    is-invalid
  />
</template>

Resize

Control the resize behavior with the resize prop: none, both, horizontal, or vertical.

<script setup lang="ts">
import { HTextArea } from '@holistics/design-system'

const sizes = ['none', 'both', 'horizontal', 'vertical'] as const
</script>
<template>
  <div class="grid grid-cols-2 gap-4">
    <HTextArea
      v-for="resize in sizes"
      :key="resize"
      :resize
      class="w-[260px]"
      :top-text="'resize=&quot;' + resize + '&quot;'"
      :placeholder="resize === 'none'
        ? 'Cannot be resized'
        : resize === 'horizontal'
          ? 'Resize horizontally only'
          : resize === 'vertical'
            ? 'Resize vertically only'
            : 'Resize in both directions'"
    />
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
resize	TextAreaResize = "both"
textareaClass	HTMLAttributeClass
id	string
topText	string
bottomText	string
iconLeft	"function" | "add-block" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/claude-spark-clay" | "ai/file" | "ai/gemini" | "ai/generate" | "ai/mascot-color-smile" | ... 439 more ...
iconRight	"function" | "add-block" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/claude-spark-clay" | "ai/file" | "ai/gemini" | "ai/generate" | "ai/mascot-color-smile" | ... 439 more ...
disabled	boolean = false
isInvalid	boolean = false
ariaDescribedby	string
required	Booleanish
name	string
form	string
wrap	string
placeholder	string
autofocus	Booleanish
maxlength	Numberish
minlength	Numberish
readonly	Booleanish
autocomplete	string
cols	Numberish
dirname	string
rows	Numberish
modelValue	string

Events

Name	Parameters	Description
@update:modelValue	[value: string | undefined]

Slots

Name	Scoped	Description
#iconLeft	{}
#iconRight	{}

Exposed

Name	Type	Description
textareaRef	HTMLTextAreaElement | null
focus	() => void
blur	() => void
select	() => void