TextArea

<textarea
  placeholder="Type your message here."
  rows="4"
  class="uc-textarea">
</textarea>

<div class="uc-space-y-2">
  <label>Bio</label>
  <textarea
    placeholder="Tell us a little bit about yourself"
    rows="4"
    class="uc-textarea">
  </textarea>
  <p class="uc-text-sm uc-text-fg-disabled">You can use up to 160 characters.</p>
</div>

<textarea
  placeholder="This textarea is disabled."
  rows="3"
  disabled
  class="uc-textarea uc-resize-none">
</textarea>

<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-textarea">
  </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>

<div class="uc-space-y-2">
  <label>Message</label>
  <textarea
    rows="3"
    class="uc-textarea uc-textarea-error">Short</textarea>
  <p class="uc-text-sm uc-text-accents-red">Message must be at least 10 characters.</p>
</div>

<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-textarea">
    </textarea>
  </div>
  <div class="uc-flex uc-justify-end uc-gap-2">
    <button class="...">Cancel</button>
    <button class="...">Send Feedback</button>
  </div>
</div>