Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Forms

Learn how to build your website with boba!

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>