### 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

Email address
Example textarea

    <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.

Email
Password

    <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.

File input example
Disabled file input example
Multiple files input example

    <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.

Small file input example
Large file input example

    <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

Choose your browser from the list:

    <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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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