v1.1.1

TextArea

Displays a multi-line text input field.

Default

Basic textarea.

html 
<textarea placeholder="Type your message here." rows="4" class="vt-textarea" aria-label="Type your message here."></textarea>

With Label

Textarea with label and description.

html

You can use up to 160 characters.

<label class="vt-label" for="textarea-2-1">
  Bio
</label>
<textarea placeholder="Tell us a little bit about yourself" rows="4" class="vt-textarea" id="textarea-2-1" aria-describedby="textarea-2-2"></textarea>
<p class="vt-text-sm vt-text-foreground-muted" id="textarea-2-2">You can use up to 160 characters.</p>

Disabled

Textarea in disabled state.

html 
<textarea placeholder="This textarea is disabled." rows="3" disabled="" class="vt-textarea vt-resize-none" aria-label="This textarea is disabled."></textarea>

With Character Count

Textarea showing remaining characters.

html
0/160 
<label class="vt-label" for="charcount-textarea">
  Description
</label>
<textarea id="charcount-textarea" placeholder="Describe your project..." rows="4" maxlength="160" oninput="document.getElementById('char-count').textContent = this.value.length" class="vt-textarea"></textarea>
<div class="vt-flex vt-justify-end">
  <span class="vt-text-xs vt-text-foreground-muted"><span id="char-count">0</span>/160</span>
</div>

Error State

Textarea with validation error.

html

Message must be at least 10 characters.

<label class="vt-label" for="textarea-5-1">
  Message
</label>
<textarea rows="3" class="vt-textarea vt-textarea-error" id="textarea-5-1" aria-invalid="true" aria-describedby="textarea-5-2">Short</textarea>
<p class="vt-text-sm vt-text-error-fill" id="textarea-5-2">Message must be at least 10 characters.</p>

Form Example

Textarea in a feedback form context.

html 
<div class="vt-space-y-2">
  <label class="vt-label" for="textarea-6-1">
    Subject
  </label>
  <input type="text" placeholder="What is this about?" class="vt-input" id="textarea-6-1">
</div>
<div class="vt-space-y-2">
  <label class="vt-label" for="textarea-6-2">
    Message
  </label>
  <textarea placeholder="Your feedback..." rows="5" class="vt-textarea" id="textarea-6-2"></textarea>
</div>
<div class="vt-flex vt-justify-end vt-gap-2">
  <button class="vt-btn vt-btn-bordered">
    Cancel
  </button>
  <button class="vt-btn vt-btn-primary">
    Send Feedback
  </button>
</div>

Guidelines

Multi-line text entry. Same label/helper rules as input.

Do
Always pair a textarea with a visible label.
Don't
Don't rely on placeholder text as the only label.

Message must be at least 10 characters.

Do
Signal invalid input with the error class and a helper message.
Don't
Don't leave a required field disabled when it needs input.

API Reference

All CSS classes available for the TextArea component.

Class Type Description
vt-textarea Base Full textarea styling -- flex, w-full, rounded-lg, border, bg, padding, text, placeholder, focus ring, resize-y, min-height
vt-textarea-error State Error state -- red border and red focus ring
vt-resize-none Modifier Disable resize (used with disabled)
vt-resize-y Modifier Allow vertical resize only (included in vt-textarea)

Accessibility

Keyboard and screen reader support.

Feature Details
Label Always provide a visible label linked via for/id
Error Use aria-invalid="true" and aria-describedby for error messages
Required Use required attribute for mandatory textareas
Character count Announce remaining characters via aria-live="polite"
Resize Auto-resize should not cause content to jump unexpectedly