Forms

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

Bootstrap Forms documentation

Form controls

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                    
                      <form>
                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput1">Text</label>
                          <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput2">Password</label>
                          <input type="password" id="exampleFormControlInput2" class="form-control" value="********">
                        </div>

                        <div class="form-group">
                          <label class="input-label">Helper text</label>
                          <input type="password" class="form-control" value="**********">
                          <span class="text-muted font-size-1">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlInput3">Email</label>
                          <input type="email" id="exampleFormControlInput3" class="form-control" placeholder="name@example.com">
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlSelect1">Select</label>
                          <select id="exampleFormControlSelect1" class="form-control">
                            <option>Choose an option</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlSelect2">Multiple select</label>
                          <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>

                        <div class="form-group">
                          <label class="input-label" for="exampleFormControlTextarea1">Textarea</label>
                          <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
                        </div>

                        <div class="form-group">
                          <label class="input-label">Range input</label>
                          <input type="range" class="custom-range" value="3" min="0" max="10">
                        </div>
                      </form>
                    
                  

Input group break

Long contents don't fit in small screens? Use .input-group-{breakpoint}-down-break classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.

                    
                      <div class="input-group input-group-md-down-break">
                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio1">
                            <label class="custom-control-label" for="genderTypeRadio1">Male</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->

                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
                            <label class="custom-control-label" for="genderTypeRadio2">Female</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->

                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio3">
                            <label class="custom-control-label" for="genderTypeRadio3">Other</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->
                      </div>
                    
                  

Full vertical example:

                    
                      <div class="input-group input-group-down-break">
                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio1">
                            <label class="custom-control-label" for="verticalExampleGenderTypeRadio1">Male</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->

                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio2" checked>
                            <label class="custom-control-label" for="verticalExampleGenderTypeRadio2">Female</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->

                        <!-- Custom Radio -->
                        <div class="form-control">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio3">
                            <label class="custom-control-label" for="verticalExampleGenderTypeRadio3">Other</label>
                          </div>
                        </div>
                        <!-- End Custom Radio -->
                      </div>
                    
                  

Custom file attachments

We use HS File Attach library to make file attachments functional.

For file inputs, swap the .form-control for .form-control-file.

                    
                      <form>
                        <div class="custom-file">
                          <input type="file" class="js-file-attach custom-file-input" id="customFile"
                                  data-hs-file-attach-options='{
                                    "textTarget": "[for=\"customFile\"]"
                                 }'>
                          <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                      </form>
                    
                  

Customized modern button look

                    
                      <form>
                        <!-- File Attachment Button -->
                        <label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn" for="fileAttachmentBtn">
                          <span id="customFileExample5">Choose file to upload</span>
                          <input id="fileAttachmentBtn" name="file-attachment" type="file" class="js-file-attach file-attachment-btn-label"
                                 data-hs-file-attach-options='{
                                    "textTarget": "#customFileExample5"
                                 }'>
                        </label>
                        <!-- End File Attachment Button -->
                      </form>
                    
                  

Update photo

Upload Photo
                    
                      <form>
                        <label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
                          <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        </label>
                        <div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
                          <input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
                                 data-hs-file-attach-options='{
                                    "textTarget": "#avatarImg",
                                    "mode": "image",
                                    "targetAttr": "src"
                                    "allowTypes": [".png", ".jpeg", ".jpg"]
                                 }'>
                        </div>
                      </form>
                    
                  

or this one

                    
                      <form>
                      <!-- File Attachment Input -->
                      <label class="file-attachment-input" for="fileAttachmentInput">
                        <span id="customFileExample4">Browse your device and upload documents</span>
                        <small class="d-block text-muted">Maximum file size 10MB</small>

                        <input id="fileAttachmentInput" name="file-attachment" type="file" class="js-file-attach file-attachment-input-label"
                               data-hs-file-attach-options='{
                                 "textTarget": "#customFileExample4"
                               }'>
                      </label>
                      <!-- End File Attachment Input -->
                    </form>
                    
                  

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

                    
                      <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Readonly plain text</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control-plaintext" value="email@example.com" readonly>
                        </div>
                      </div>

                      <div class="form-group row">
                        <label class="col-sm-3 col-form-label">Readonly field</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" value="Read only" readonly>
                        </div>
                      </div>
                    
                  
                    
                      <div class="form-group">
                        <label>Disabled input</label>
                        <input type="text" class="form-control" placeholder="Disabled input" disabled>
                      </div>

                      <div class="form-group">
                        <label>Disabled select</label>
                        <select class="custom-select" disabled>
                          <option>Choose an option</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                      </div>

                      <div class="form-group">
                        <label>Disabled textarea</label>
                        <textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
                      </div>

                      <div class="form-group">
                        <label>Disabled file input</label>
                        <div class="custom-file">
                          <input type="file" id="customFileExample1" class="custom-file-input" disabled>
                          <label class="custom-file-label" for="customFileExample1">Choose file</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <label>Disabled range input</label>
                        <input type="range" class="custom-range" value="3" min="0" max="10" disabled>
                      </div>
                    
                  

Input group Flush

                    
                      <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                          <div class="input-group-flush mb-2">
                            <input type="email" class="form-control" placeholder="Email" aria-label="Email">
                          </div>

                          <div class="input-group-flush mb-2">
                            <input type="password" class="form-control" placeholder="Password" aria-label="Password">
                          </div>
                        </div>
                      </div>
                    
                  

Input group Merge

                    
                      <!-- Input Group -->
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="far fa-user"></i>
                          </span>
                        </div>
                        <input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
                      </div>
                      <!-- End Input Group -->
                    
                  

Borderless form

Add .input-group-borderless to the parent class for an input form without borders.

                    
                      <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                          <div class="input-group-borderless mb-2">
                            <input type="email" class="form-control" placeholder="Email" aria-label="Email">
                          </div>

                          <div class="input-group-borderless mb-2">
                            <input type="password" class="form-control" placeholder="Password" aria-label="Password">
                          </div>
                        </div>
                      </div>
                    
                  

Pilled form

Use the .input-group-pill modifier class to make forms more rounded (with a larger border-radius and additional horizontal padding).

                    
                      <div class="row">
                        <div class="col-md-6 mb-3 mb-md-0">
                          <div class="input-group-pill mb-2">
                            <input type="email" class="form-control" placeholder="Email" aria-label="Email">
                          </div>

                          <div class="input-group-pill mb-2">
                            <input type="password" class="form-control" placeholder="Password" aria-label="Password">
                          </div>

                          <!-- Input Group -->
                          <div class="input-group input-group-pill input-group-merge">
                            <div class="input-group-prepend">
                              <span class="input-group-text">
                                <i class="far fa-user"></i>
                              </span>
                            </div>
                            <input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
                          </div>
                          <!-- End Input Group -->
                        </div>
                      </div>
                    
                  

Checkbox and radios

You will receive notifications about actions to your email.
                    
                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customCheck11" class="custom-control-input">
                          <label class="custom-control-label" for="customCheck11">Unchecked</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customCheck12" class="custom-control-input" checked>
                          <label class="custom-control-label" for="customCheck12">Checked</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customCheck13" class="custom-control-input indeterminate-checkbox" checked>
                          <label class="custom-control-label" for="customCheck13">Indeterminate</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customHelperCheck1" class="custom-control-input">
                          <label class="custom-control-label" for="customHelperCheck1">Notify about new notifications</label>
                          <div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customCheck14" class="custom-control-input" disabled>
                          <label class="custom-control-label" for="customCheck14">Unchecked and disabled</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-checkbox">
                          <input type="checkbox" id="customCheck15" class="custom-control-input" checked disabled>
                          <label class="custom-control-label" for="customCheck15">Checked and disabled</label>
                        </div>
                      </div>
                    
                  
You will receive notifications about actions to your email.
                    
                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio1" class="custom-control-input" name="customRadio">
                          <label class="custom-control-label" for="customRadio1">Unchecked</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio2" class="custom-control-input" checked name="customRadio">
                          <label class="custom-control-label" for="customRadio2">Checked</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio3" class="custom-control-input" name="customRadio">
                          <label class="custom-control-label" for="customRadio3">Unchecked</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio4" class="custom-control-input" name="customRadio">
                          <label class="custom-control-label" for="customRadio4">Notify about new notifications</label>
                          <div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio5" class="custom-control-input" disabled name="customRadio">
                          <label class="custom-control-label" for="customRadio5">Unchecked and disabled</label>
                        </div>
                      </div>

                      <div class="form-group">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customRadio6" class="custom-control-input" checked disabled>
                          <label class="custom-control-label" for="customRadio6">Checked and disabled</label>
                        </div>
                      </div>
                    
                  

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

                    
                      <div class="form-group">
                        <div class="form-check form-check-inline">
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" id="customInlineCheck1" class="custom-control-input">
                            <label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
                          </div>
                        </div>
                        <div class="form-check form-check-inline">
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked>
                            <label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
                          </div>
                        </div>
                        <div class="form-check form-check-inline">
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked>
                            <label class="custom-control-label" for="customInlineCheck3">Checked</label>
                          </div>
                        </div>
                      </div>
                    
                  
                    
                      <div class="form-group">
                      <div class="form-check form-check-inline">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
                          <label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
                        </div>
                      </div>
                      <div class="form-check form-check-inline">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked name="customInlineRadio">
                          <label class="custom-control-label" for="customInlineRadio2">Checked</label>
                        </div>
                      </div>
                      <div class="form-check form-check-inline">
                        <div class="custom-control custom-radio">
                          <input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
                          <label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
                        </div>
                      </div>
                    </div>
                    
                  

Checkbox bookmark New

                    
                      <!-- Checkbbox Bookmark -->
                      <div class="custom-control custom-checkbox-bookmark mb-2">
                        <input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
                        <label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
                          <span class="custom-checkbox-bookmark-default">
                            <i class="far fa-star"></i>
                          </span>
                          <span class="custom-checkbox-bookmark-active">
                            <i class="fas fa-star"></i>
                          </span>
                          <span class="text-dark ml-2">Star checkbox</span>
                        </label>
                      </div>
                      <!-- End Checkbbox Bookmark -->

                      <!-- Checkbbox Bookmark -->
                      <div class="custom-control custom-checkbox-bookmark">
                        <input type="checkbox" id="checkboxBookmark2" class="custom-control-input custom-checkbox-bookmark-input">
                        <label class="custom-checkbox-bookmark-label" for="checkboxBookmark2">
                          <span class="custom-checkbox-bookmark-default">
                            <i class="far fa-bookmark"></i>
                          </span>
                          <span class="custom-checkbox-bookmark-active">
                            <i class="fas fa-bookmark"></i>
                          </span>
                          <span class="text-dark ml-2">Bookmark checkbox</span>
                        </label>
                      </div>
                      <!-- End Checkbbox Bookmark -->
                    
                  

Switches

                    
                      <!-- Checkbox Switch -->
                      <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch1">
                        <input type="checkbox" class="toggle-switch-input" id="customSwitch1">
                        <span class="toggle-switch-label">
                          <span class="toggle-switch-indicator"></span>
                        </span>
                        <span class="toggle-switch-content">
                          <span class="d-block">Unchecked</span>
                        </span>
                      </label>
                      <!-- End Checkbox Switch -->

                      <!-- Checkbox Switch -->
                      <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch2">
                        <input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
                        <span class="toggle-switch-label">
                          <span class="toggle-switch-indicator"></span>
                        </span>
                        <span class="toggle-switch-content">
                          <span class="d-block">Checked</span>
                        </span>
                      </label>
                      <!-- End Checkbox Switch -->

                      <!-- Checkbox Switch -->
                      <label class="toggle-switch d-flex mb-3" for="customSwitch3">
                        <input type="checkbox" class="toggle-switch-input" id="customSwitch3">
                        <span class="toggle-switch-label">
                          <span class="toggle-switch-indicator"></span>
                        </span>
                        <span class="toggle-switch-content">
                          <span class="d-block">Notify about new notifications</span>
                          <small class="d-block text-muted">You will receive notifications about actions to your email</small>
                        </span>
                      </label>
                      <!-- End Checkbox Switch -->

                      <!-- Checkbox Switch -->
                      <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch4">
                        <input type="checkbox" class="toggle-switch-input" id="customSwitch4" disabled>
                        <span class="toggle-switch-label">
                          <span class="toggle-switch-indicator"></span>
                        </span>
                        <span class="toggle-switch-content">
                          <span class="d-block">Disabled</span>
                        </span>
                      </label>
                      <!-- End Checkbox Switch -->

                      <!-- Checkbox Switch -->
                      <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch5">
                        <input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked disabled>
                        <span class="toggle-switch-label">
                          <span class="toggle-switch-indicator"></span>
                        </span>
                        <span class="toggle-switch-content">
                          <span class="d-block">Checked & disabled</span>
                        </span>
                      </label>
                      <!-- End Checkbox Switch -->
                    
                  

Validation states

Valid feedback
                    
                      <div class="form-group">
                        <label>Valid input</label>
                        <input type="text" class="form-control is-valid" placeholder="Placeholder">
                      </div>

                      <div class="form-group">
                        <label>Valid select</label>
                        <select class="form-control custom-select is-valid">
                          <option>Choose an option</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="text-success font-size-1">Valid feedback</span>
                      </div>

                      <div class="form-group">
                        <label>Valid textarea</label>
                        <textarea class="form-control is-valid" placeholder="Textarea field" rows="4"></textarea>
                      </div>

                      <div class="form-group">
                        <label>Valid file input</label>
                        <div class="custom-file">
                          <input type="file" id="customFileExample2" class="custom-file-input is-valid">
                          <label class="form-control custom-file-label" for="customFileExample2">Choose file</label>
                        </div>
                      </div>
                    
                  
Invalid feedback
                    
                      <div class="form-group">
                        <label>Valid input</label>
                        <input type="text" class="form-control is-invalid" placeholder="Placeholder">
                      </div>

                      <div class="form-group">
                        <label>Valid select</label>
                        <select class="form-control custom-select is-invalid">
                          <option>Choose an option</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                        <span class="text-success font-size-1">Valid feedback</span>
                      </div>

                      <div class="form-group">
                        <label>Valid textarea</label>
                        <textarea class="form-control is-invalid" placeholder="Textarea field" rows="4"></textarea>
                      </div>

                      <div class="form-group">
                        <label>Valid file input</label>
                        <div class="custom-file">
                          <input type="file" id="customFileExample3" class="custom-file-input is-invalid">
                          <label class="form-control custom-file-label" for="customFileExample3">Choose file</label>
                        </div>
                      </div>