The Textarea is a multi-line text input control allows users to enter any combination of letters, numbers, or symbols. It adds default styles to the native <textarea> HTML tag, providing a consistent and visually appealing appearance out of the box. The component supports autoresizing based on the content entered by the user and provides the option to display a character count.
Textarea in disabled state
SfTextarea comes with out-of-the-box styles for a disabled Textarea.
<template>
<label>
<span class="typography-text-sm font-medium cursor-not-allowed text-disabled-900">Description</span>
<SfTextarea
disabled
placeholder="Write something about yourself..."
class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
/>
</label>
<p class="typography-hint-xs text-disabled-500 mt-0.5">Do not include personal or financial information.</p>
</template>
<script lang="ts" setup>
import { SfTextarea } from '@storefront-ui/vue';
</script>
Readonly Textarea
SfTextarea comes with out-of-the-box styles for a readonly Textarea.
<template>
<label>
<span class="typography-text-sm font-medium">Description</span>
<SfTextarea
model-value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
readonly
/>
</label>
<p class="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
</template>
<script lang="ts" setup>
import { SfTextarea } from '@storefront-ui/vue';
</script>
Invalid State
If you pass the invalid prop, the Textarea will be styled to indicate an invalid state.
<template>
<label>
<span class="text-sm font-medium">Description</span>
<SfTextarea invalid placeholder="Write something about yourself..." class="w-full block" />
</label>
<div class="flex justify-between mt-0.5">
<p class="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
<p class="typography-hint-xs text-neutral-500">Do not include personal or financial information.</p>
</div>
</template>
<script lang="ts" setup>
import { SfTextarea } from '@storefront-ui/vue';
</script>
Textarea with characters counter
The Textarea component provides the option to display a character count, allowing users to track the number of characters they have entered. This feature can be helpful when there are character limits or restrictions for the input.
The Textarea component supports autoresizing based on the content entered by the user. As the user types or deletes text, the height of the textarea adjusts automatically to fit the content, eliminating the need for scrollbars. In the example below we use @frsource/autoresize-textarea library to provide this feature.
<template>
<label>
<span class="typography-text-sm font-medium">Description</span>
<SfTextarea ref="textareaRef" class="w-full h-max-[500px] block" />
</label>
<p class="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
</template>
<script setup lang="ts">
import { SfTextarea } from '@storefront-ui/vue';
import { attach } from '@frsource/autoresize-textarea';
import { ref, onMounted } from 'vue';
import { unrefElement } from '@vueuse/core';
const textareaRef = ref();
onMounted(() => {
attach(unrefElement(textareaRef));
});
</script>
Accessibility notes
Textarea is multi-line input, so Return or Enter key inserts a line break.