Textarea

Allows users to input long text data into a form.

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <textarea class="textarea variant-plain sz-md" placeholder="Your message" rows="3"> </textarea>
  </div>
  <div class="field">
      <textarea class="textarea variant-bottomOutlined sz-md" placeholder="Your message" rows="3"> </textarea>
  </div>
  <div class="field">
      <textarea class="textarea variant-soft sz-md" placeholder="Your message" rows="3"> </textarea>
  </div>
  <div class="field">
      <textarea class="textarea variant-outlined sz-md" placeholder="Your message" rows="3"> </textarea>
  </div>
  <div class="field">
      <textarea class="textarea variant-mixed sz-md" placeholder="Your message" rows="3"> </textarea>
  </div>
</form>

Reference

Textarea

The textarea component have the following props

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]

With label

 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="msg">Message</label>
      <textarea class="textarea variant-mixed sz-md" id="msg" rows="3"> </textarea>
  </div>
</form>

With Caption

Input description
 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="msg">Message</label>
      <textarea class="textarea variant-mixed sz-md" id="msg" rows="3"> </textarea>
      <span class="inline-block text-sm text-caption">Input description</span>
  </div>
</form>

Disabled

Input description
 
<form class="space-y-4 max-w-xs w-full" data-shade="900">
  <div class="field">
      <label class="text-title" for="msg">Message</label>
      <textarea disabled class="textarea variant-mixed sz-md" id="msg" rows="3"> </textarea>
      <span class="inline-block text-sm text-caption">Input description</span>
  </div>
</form>