Forms

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

Forms on Bootstrap
Basic Form
<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input class="form-control" id="name" type="text" placeholder="Name">
  </div>
  <div class="form-group">
    <label for="readonly">Read Only</label>
    <input class="form-control" id="readonly" type="text" placeholder="Readonly input here…" readonly="">
  </div>
  <div class="form-group">
    <label>Read only plain text</label>
    <input class="form-control-plaintext" id="staticEmail" type="text" readonly="" value="email@example.com">
  </div>
  <div class="form-group">
    <label for="email1">Email</label>
    <input class="form-control" id="email1" type="email" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input class="form-control" id="password" type="password" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="defaultcheckbox1" type="checkbox">
    <label class="form-check-label" for="defaultcheckbox1">Cehckbox</label>
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="defaultCheck2" type="checkbox" value="" disabled="">
    <label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="exampleRadios2" type="radio" name="exampleRadios" value="option2">
    <label class="form-check-label" for="exampleRadios2">Default radio</label>
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" id="exampleRadios3" type="radio" name="exampleRadios" value="option3" disabled="">
    <label class="form-check-label" for="exampleRadios3">Disabled radio</label>
  </div>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input class="form-control-file" id="exampleFormControlFile1" type="file">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select class="form-control" id="exampleFormControlSelect2" multiple="">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input class="form-control-range" id="formControlRange" type="range">
  </div>
</form><button class="btn btn-primary mb-3" type="submit">Save</button>
Input Group
@
@example.com
https:example.com/users/
$
.00
With textarea
First and last name
$0.00
$0.00
ActionAnother actionSomething else here Separated link
ActionAnother actionSomething else here Separated link 
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">@</span></div><input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3"><input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append"><span class="input-group-text" id="basic-addon2">@example.com</span></div>
</div><label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text" id="basic-addon3">https:example.com/users/</span></div><input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">$</span></div><input class="form-control" type="text" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append"><span class="input-group-text">.00</span></div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">With textarea</span></div><textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text"><input type="checkbox" aria-label="Checkbox for following text input"></div>
  </div><input class="form-control" type="text" aria-label="Text input with checkbox">
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text"><input type="radio" aria-label="Radio button for following text input"></div>
  </div><input class="form-control" type="text" aria-label="Text input with radio button">
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">First and last name</span></div><input class="form-control" type="text" aria-label="First name"><input class="form-control" type="text" aria-label="Last name">
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div><input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="input-group mb-3"><input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div>
</div>
<div class="input-group mb-3">
  <div class="input-group-prepend"><button class="btn btn-primary dropdown-toggle shadow-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div><input class="form-control" type="text" aria-label="Text input with dropdown button">
</div>
<div class="input-group"><input class="form-control" type="text" aria-label="Text input with dropdown button">
  <div class="input-group-append"><button class="btn btn-primary dropdown-toggle shadow-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider" role="separator"></div><a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Custom Forms

For even more customization and cross-browser consistency, use Bootstrap's completely custom form elements to replace the browser defaults.

Custom Forms on Bootstrap
Checkboxes
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheck1" type="checkbox">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheck2" type="checkbox">
  <label class="custom-control-label" for="customCheck2">Check another custom checkbox</label>
</div>
Radios
<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadio1" type="radio" name="customRadio">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadio2" type="radio" name="customRadio">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
Inline Radios
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" id="customRadioInline1" type="radio" name="customRadioInline1">
  <label class="custom-control-label" for="customRadioInline1">Toggle</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input class="custom-control-input" id="customRadioInline2" type="radio" name="customRadioInline1">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this</label>
</div>
Disabled
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" id="customCheckDisabled1" type="checkbox" disabled="">
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
  <input class="custom-control-input" id="customRadioDisabled2" type="radio" name="radioDisabled" disabled="">
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
Switches
<div class="custom-control custom-switch">
  <input class="custom-control-input" id="customSwitch1" type="checkbox">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
Disabled Switches
<div class="custom-control custom-switch">
  <input class="custom-control-input" id="customSwitch2" type="checkbox" disabled="">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Custom Select
<select class="custom-select custom-select-lg mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mb-3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Multiple Select
<select class="custom-select mb-3" multiple="">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="2">Two</option>
  <option value="3">Four</option>
</select>
<select class="custom-select" multiple="" size="3">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="3">Four</option>
</select>
Range Input
<label for="customRange1">Example range</label>
<input class="custom-range" id="customRange1" type="range">
File Browser
<div class="custom-file">
  <input class="custom-file-input" id="customFile" type="file">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>