Textareas
Textareas capture bodies of text.
<form class="form-control" action="#" method="post">
<div>
<label class="textarea-label" for="message"> Default </label>
<textarea name="name" rows="8" cols="80" placeholder="This is a textarea!"></textarea>
</div>
</form>
Sizes
Textareas can be resized.
<form class="form-control" action="#" method="post">
<div>
<label class="textarea-label" for="message"> Small Textarea </label>
<textarea class="small" name="name" rows="8" cols="80" placeholder="This is a small textarea!"></textarea>
</div>
<br />
<div>
<label class="textarea-label" for="message"> Default Textarea </label>
<textarea name="name" rows="8" cols="80" placeholder="This is the default textarea!"></textarea>
</div>
<br />
<div>
<label class="textarea-label" for="message"> Medium Textarea </label>
<textarea class="medium" name="name" rows="8" cols="80" placeholder="This is a medium textarea!"></textarea>
</div>
<br />
<div>
<label class="textarea-label" for="message"> Large Textarea </label>
<textarea class="large" name="name" rows="8" cols="80" placeholder="This is a large textarea!"></textarea>
</div>
</form>
States
Forms can be disabled using the disabled
attribute.
<form class="form-control" action="#" method="post">
<div>
<label class="textarea-label" for="message"> Disabled Textarea </label>
<textarea disabled name="name" rows="8" cols="80" placeholder="You can't type now!"></textarea>
</div>
</form>
Colors
Change the outline color of your textareas using boba's eye-catching color palette.
<form class="form-control" action="#" method="post">
<div>
<label class="textarea-label text-green" for="message"> Green </label>
<textarea class="green" name="name" rows="8" cols="80" placeholder="This is a textarea!"></textarea>
</div>
</form>