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!

Inputs

Inputs capture small strings of text.

Compatibility

The following type attributes are supported by inputs:

  • type="color"
  • type="date"
  • type="email"
  • type="number"
  • type="password"
  • type="search"
  • type="tel"
  • type="text"
  • type="url"
<form class="form-control" action="#" method="post">
    <label class="input-label" for="example-default"> Example </label>
    <input class="green" type="email" name="" value="" placeholder="example@email.com">
</form>

Sizes

Inputs can be resized.



<form class="form-control" action="#" method="post">
    <div>
        <label class="input-label" for="email"> Small Input </label>
        <input class="small" type="email" name="" value="" placeholder="example@email.com">
    </div>
    <br />
    <div>
        <label class="input-label" for="email"> Default Input </label>
        <input type="email" name="" value="" placeholder="example@email.com">
    </div>
    <br />
    <div>
        <label class="input-label" for="email"> Medium Input </label>
        <input class="medium" type="email" name="" value="" placeholder="example@email.com">
    </div>
    <br />
    <div>
        <label class="input-label" for="email"> Large Input </label>
        <input class="large" type="email" name="" value="" placeholder="example@email.com">
    </div>
</forms>

Styles

Easily change the look of your inputs to better suit your needs.

Rounded

Inputs can be pill-shaped.


<form class="form-control" action="#" method="post">
    <label class="input-label text-green" for="email"> Green </label>
    <input class="rounded green" type="email" name="" value="" placeholder="example@email.com">
</form>

States

Inputs can be disabled using the disabled attribute.


<form class="form-control" action="#" method="post">
    <div>
        <label class="input-label" for="email">Disabled Input</label>
        <input disabled class="" type="email" name="" value="" placeholder="disabled@email.com">
    </div>
    <br />
    <div>
        <label class="input-label text-red" for="email">Red, Rounded, Disabled Input</label>
        <input disabled class="rounded red" type="email" name="" value="" placeholder="red_disabled@email.com">
    </div>
    <br />
    <div>
        <label class="input-label text-green" for="email">Green, Rounded, Disabled Input</label>
        <input disabled class="rounded green" type="email" name="" value="" placeholder="green_disabled@email.com">
    </div>
</form>

Colors

Change the outline color of your inputs using boba's refreshing color palette.








<form class="form-control" action="#" method="post">
    <label class="input-label text-green" for="email"> Green </label>
    <input class="green" type="email" name="" value="" placeholder="example@email.com">
</form>