Form controls

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form controls on Bootstrap
Example
<div class="mb-3">
  <label class="form-label" for="exampleFormControlInput1">Email address</label>
  <input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" />
</div>
<div class="mb-3">
  <label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
Sizing
<div class="mb-3">
  <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example" />
</div>
<div class="mb-3">
  <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" />
</div>
<div class="mb-3">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example" />
</div>
Readonly plain text

If you want to have input readonly elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<div class="mb-3 row">
  <label class="col-sm-2 col-form-label" for="staticEmail">Email</label>
  <div class="col-sm-10">
    <input class="form-control-plaintext outline-none" id="staticEmail" type="text" readonly="" value="email@example.com" />
    <div class="mb-3 row"></div>
  </div>
  <label class="col-sm-2 col-form-label" for="inputPassword">Password</label>
  <div class="col-sm-10">
    <input class="form-control" id="inputPassword" type="password" />
  </div>
</div>
File Input

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose File and selected file name text.

<div class="mb-3">
  <label class="form-label" for="customFile">File input example</label>
  <input class="form-control" id="customFile" type="file" />
</div>
<div class="mb-3">
  <label class="form-label" for="formFileDisabled">Disabled file input example</label>
  <input class="form-control" id="formFileDisabled" type="file" disabled="disabled" />
</div>
<div class="mb-3">
  <label class="form-label" for="formFileMultiple">Multiple files input example</label>
  <input class="form-control" id="formFileMultiple" type="file" multiple="multiple" />
</div>
File Input Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs.

<div class="mb-3">
  <label class="form-label" for="customFileSm">Small file input example</label>
  <input class="form-control form-control-sm" id="customFileSm" type="file" />
</div>
<div class="mb-3">
  <label class="form-label" for="customFileLg">Large file input example</label>
  <input class="form-control form-control-lg" id="customFileLg" type="file" />
</div>
Datalist
<div class="mb-3">
  <label class="form-label" for="customDatalist">Choose your browser from the list:</label>
  <input class="form-control form-control-sm" id="customDatalist" list="browsers" name="browser" />
  <datalist id="browsers">
    <option value="Edge"> </option>
    <option value="Firefox"> </option>
    <option value="Chrome"> </option>
    <option value="Opera"> </option>
    <option value="Safari"></option>
  </datalist>
</div>

Thank you for creating with Falcon |
2023 © Themewagon

v3.19.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize