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>