## Form Control

Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

Form Controls on Bootstrap

#### Example

    <div class="mb-3">

      <label class="form-label" for="exampleFormControlInput">Email address </label>

      <input class="form-control" id="exampleFormControlInput" type="email" placeholder="name@example.com" />
    </div>
    <div class="mb-0">

      <label class="form-label" for="exampleTextarea">Example Textarea </label>

      <textarea class="form-control" id="exampleTextarea" rows="3"> </textarea>
    </div>

Email address
Example Textarea

#### Sizing

    <div class="mb-3">

      <input class="form-control form-control-lg" id="sizingInputLg" type="text" placeholder=".form-control-lg" />
    </div>
    <div class="mb-3">

      <input class="form-control form-control" id="sizingInput" type="text" placeholder=".form-control" />
    </div>
    <div class="mb-0">

      <input class="form-control form-control-sm" id="sizingInputSm" type="text" placeholder=".form-control-sm" />
    </div>

#### Readonly plain text

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

Email
Password

#### File Input

    <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 example
Disabled file input example
Multiple files input example

#### File Input Sizing

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

Small file input example
Large file input example

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize