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>

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>

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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize