A simple textarea.
<textarea class="zust-textarea" placeholder="Write up A Message Just for Me ;)"></textarea>
You can set a textarea's rows and columns by adding attribute rows and cols.
<textarea class="zust-textarea" rows="5" cols="20" placeholder="I have 5 Rows and 20 Columns"></textarea>
It supports all theme colors.
<textarea class="zust-textarea zust-success">Success Color</textarea>
You can make a textarea readonly by adding attribute readonly.
<textarea class="zust-textarea" readonly rows="5">This is a text that you can just read. You can not change me.</textarea>
Want to make a textarea disabled? Just add attribute disabled.
<textarea class="zust-textarea" disabled>I'm a disabled textarea.</textarea>
Textarea can be transparent. Add class zust-transparent.
<textarea class="zust-textarea zust-transparent">Am I not transparent?</textarea>
You can control the ability of resizing of a textarea. Add class zust-v-resize for only resizable vertically and/or add class zust-h-resize for only resizable horizontally.
If you want to completely disable the ability of resizing, then add class zust-unresizable.
<textarea class="zust-textarea zust-v-resize">I'm Only Resizable Vertically</textarea>
<textarea class="zust-textarea zust-h-resize">I'm Only Resizable Horizontally</textarea>
<textarea class="zust-textarea zust-unresizable">I'm Not Resizable</textarea>
You can also make an textarea responsive by placing it inside of zust-form-el and adding class zust-responsive to zust-form-el.
<p class="zust-form-el zust-responsive">
<textarea class="zust-textarea">Am I responsive? Try resizing me. I respect my parent container.</textarea>
</p>
Using responsive size is recommended over naked textarea, though it needs extra code but it is much more better than regular textarea.
Make a textarea fullwidth by adding class zust-fullwidth to zust-form-el.
<p class="zust-form-el zust-fullwidth">
<textarea class="zust-textarea">This is Fullwidth</textarea>
</p>