Textarea

Basic Usage

Description

<template>
  <spr-textarea v-model="textarea" label="Description" placeholder="type here...." />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea = ref('');
</script>

Display Helper

A helper message is a text label below the input field that provides additional information about instructions, formatting hints, validation feedback, etc.

To display the helper message, set the display-helper prop to true and add the helper-text prop with the helper message text. You can also insert an icon with the helper-icon prop. This uses the Iconify icon library.

Textarea

This is a helper message

Textarea

This is an error message

<template>
  <spr-textarea
    v-model="textarea"
    label="Textarea"
    placeholder="type here...."
    display-helper
    helper-text="This is a helper message"
  />
  <spr-textarea
    v-model="textarea"
    label="Textarea"
    placeholder="type here...."
    display-helper
    helper-text="This is an error message"
    helper-icon="ph:warning-circle-fill"
    error
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea = ref('');
</script>

Alternatively, you can use the helperMessage slot to display a custom helper message.

Textarea

This is a helper message

Textarea

This is an error message

<template>
  <spr-textarea v-model="textarea" label="Textarea" display-helper>
    <template #helperMessage> This is a helper message </template>
  </spr-textarea>
  <spr-textarea v-model="textarea" label="Textarea" display-helper error>
    <template #helperMessage>
      <Icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>This is an error message</span>
    </template>
  </spr-textarea>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea = ref('');
</script>

Error State

Description

This is an error message

<template>
  <spr-textarea
    v-model="textarea"
    label="Description"
    placeholder="type here...."
    display-helper
    helper-text="This is an error message"
    helper-icon="ph:warning-circle-fill"
    error
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea = ref('');
</script>

Max Length

Descriptionset Maximum Characters

22/255

<template>
  <spr-textarea
    v-model="textareaMaxLength"
    label="Description"
    placeholder="type here...."
    :maxLength="255"
    hasCounter
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textareaMaxLength = ref('set Maximum Characters');
</script>

Disabled

Description

<template>
  <spr-textarea v-model="textarea" label="Description" placeholder="type here...." disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea = ref('');
</script>

Readonly

DescriptionHello world, Sprout Design System!!!

<template>
  <spr-textarea v-model="textarea2" label="Description" placeholder="type here...." readonly />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textarea2 = ref('Hello world, Sprout Design System!!!');
</script>

API Reference

Props

Name	Description	Type	Default
id	A unique identifier for the textarea element. Used for label association and accessibility purposes.	string	''
modelValue / v-model	The value of the textarea. Used with v-model directive for two-way data binding to capture and update the user's input.	string	''
label	The text label displayed above the textarea to describe its purpose or content requirements.	string	''
supporting-label	Text beside label that has a supporting style	string	''
placeholder	Placeholder text displayed inside the textarea when it's empty, providing guidance on what to enter.	string	''
active	When true, applies an active state style to the textarea. Can be used to highlight the textarea in certain application states.	boolean	false
disabled	When true, disables the textarea, preventing user interaction and applying a disabled appearance.	boolean	false
readonly	When true, makes the textarea read-only, allowing users to view but not modify the content.	boolean	false
error	When true, applies error state styling to indicate validation issues. Often used with helper text to provide feedback.	boolean	false
minLength	Sets the minimum number of characters required in the textarea. Used for HTML5 validation.	number	undefined
maxLength	Sets the maximum number of characters allowed in the textarea. Used for HTML5 validation and character counting.	number	undefined
rows	Specifies the visible height of the textarea in text lines. Controls the initial size of the textarea.	number	4
displayHelper	When true, displays a helper message area below the textarea. Used to provide additional information or validation feedback.	boolean	false
helperIcon	Specifies an icon to display alongside the helper message. Uses Iconify for icon rendering.	string	null
helperText	The text to display in the helper message area. Provides guidance, instructions, or validation feedback.	string	''
hasCounter	When true, displays a character counter showing the current length relative to maxLength. Only effective when maxLength is also specified.	boolean	false

Events

Name	Description	Parameters
update:modelValue	Emitted when the textarea value changes. Used with v-model for two-way data binding.	(value: string)

Slots

Name	Description
helperMessage	Allows for custom content in the helper message area. Use this slot to provide formatted text, icons, or other components in the helper message area.
counter	Allows for custom content in the character counter area. Use this slot to customize the appearance or behavior of the character counter.

Product Uses