TextArea

Displays a multi-line text input field.

Default

Basic textarea.

html 
<textarea
  placeholder="Type your message here."
  rows="4"
  class="uc-flex uc-w-full uc-rounded-lg uc-border
    uc-border-border-strong uc-bg-neutrals-surface
    uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
    uc-placeholder:text-fg-disabled
    uc-focus-visible:ring-2 uc-focus-visible:ring-accents-blue
    uc-resize-y uc-min-h-[80px]">
</textarea>

With Label

Textarea with label and description.

html

You can use up to 160 characters.

<div class="uc-space-y-2">
  <label>Bio</label>
  <textarea
    placeholder="Tell us a little bit about yourself"
    rows="4"
    class="uc-flex uc-w-full uc-rounded-lg uc-border
      uc-border-border-strong uc-bg-neutrals-surface
      uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
      uc-placeholder:text-fg-disabled
      uc-focus-visible:ring-2 uc-focus-visible:ring-accents-blue
      uc-resize-y uc-min-h-[80px]">
  </textarea>
  <p class="uc-text-sm uc-text-fg-disabled">You can use up to 160 characters.</p>
</div>

Disabled

Textarea in disabled state.

html 
<textarea
  placeholder="This textarea is disabled."
  rows="3"
  disabled
  class="uc-flex uc-w-full uc-rounded-lg uc-border
    uc-border-border-strong uc-bg-neutrals-surface
    uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
    uc-disabled:cursor-not-allowed uc-disabled:opacity-50
    uc-resize-none">
</textarea>

With Character Count

Textarea showing remaining characters.

html
0/160 
<div class="uc-space-y-2">
  <label>Description</label>
  <textarea
    id="charcount-textarea"
    placeholder="Describe your project..."
    rows="4"
    maxlength="160"
    oninput="document.getElementById('char-count').textContent = this.value.length"
    class="uc-flex uc-w-full uc-rounded-lg uc-border
      uc-border-border-strong uc-bg-neutrals-surface
      uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
      uc-focus-visible:ring-2 uc-focus-visible:ring-accents-blue
      uc-resize-y uc-min-h-[80px]">
  </textarea>
  <div class="uc-flex uc-justify-end">
    <span class="uc-text-xs uc-text-fg-disabled">
      <span id="char-count">0</span>/160
    </span>
  </div>
</div>

Error State

Textarea with validation error.

html

Message must be at least 10 characters.

<div class="uc-space-y-2">
  <label>Message</label>
  <textarea
    rows="3"
    class="uc-flex uc-w-full uc-rounded-lg uc-border
      uc-border-accents-red uc-bg-neutrals-surface
      uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
      uc-focus-visible:ring-2 uc-focus-visible:ring-accents-red
      uc-resize-y uc-min-h-[80px]">Short</textarea>
  <p class="uc-text-sm uc-text-accents-red">Message must be at least 10 characters.</p>
</div>

Form Example

Textarea in a feedback form context.

html 
<div class="uc-space-y-4">
  <div class="uc-space-y-2">
    <label>Subject</label>
    <input type="text" placeholder="What is this about?" class="..." />
  </div>
  <div class="uc-space-y-2">
    <label>Message</label>
    <textarea
      placeholder="Your feedback..."
      rows="5"
      class="uc-flex uc-w-full uc-rounded-lg uc-border
        uc-border-border-strong uc-bg-neutrals-surface
        uc-px-3 uc-py-2 uc-text-sm uc-text-fg-primary
        uc-focus-visible:ring-2 uc-focus-visible:ring-accents-blue
        uc-resize-y uc-min-h-[80px]">
    </textarea>
  </div>
  <div class="uc-flex uc-justify-end uc-gap-2">
    <button class="...">Cancel</button>
    <button class="...">Send Feedback</button>
  </div>
</div>

API Reference

All CSS classes available for the TextArea component.

Class Type Description
uc-w-full Layout Full width textarea
uc-rounded-lg Style Rounded corners on the textarea
uc-border-border-strong Style Default border color
uc-bg-neutrals-surface Color Surface background color
uc-text-fg-primary Color Primary text color for input
uc-placeholder:text-fg-disabled Color Muted placeholder text
uc-focus-visible:ring-2 uc-focus-visible:ring-accents-blue State Blue focus ring on keyboard focus
uc-border-accents-red State Red border for error state
uc-focus-visible:ring-accents-red State Red focus ring for error state
uc-resize-y Modifier Allow vertical resize only
uc-resize-none Modifier Disable resize (used with disabled)
uc-min-h-[80px] Size Minimum height for textarea
uc-disabled:cursor-not-allowed uc-disabled:opacity-50 State Disabled state styling

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