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

Name	Description	Type	Available Values	Default
id	Specifies the unique identifier for the textarea.	String	-	''
modelValue	Specifies the value of the textarea.	String	-	''
label	Specifies the label for the textarea.	String	-	''
placeholder	Specifies the placeholder text for the textarea.	String	-	''
active	Indicates whether the textarea is active.	Boolean	true, false	false
disabled	Disables the textarea.	Boolean	true, false	false
readonly	Sets the textarea to read-only mode.	Boolean	true, false	false
error	Indicates whether the textarea is in an error state.	Boolean	true, false	false
minLength	Specifies the minimum length of the textarea value.	Number	-	-
maxLength	Specifies the maximum length of the textarea value.	Number	-	-
rows	Specifies the number of rows for the textarea.	Number	-	4
displayHelper	Enables the display of a helper message below the textarea.	Boolean	true, false	false
helperIcon	Specifies the icon to display alongside the helper message.	String	-	null
helperText	Specifies the helper message text.	String	-	''
hasCounter	Specifies the counter for maximum character.	Number	-	''

Product Uses