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

Preview
HTML

Text

Password

Helper text Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Email

Select

Multiple select

Textarea

Range input

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

Custom file input

To animate file inputs, we use: File attach.

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

Preview
HTML

<form>
  <div class="custom-file">
    <input type="file" class="js-custom-file-input 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>

File attachments

File attachments customized to modern button look

Preview
HTML

<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-custom-file-input file-attachment-btn-label"
           data-hs-file-attach-options='{
              "textTarget": "#customFileExample5"
           }'>
  </label>
  <!-- End File Attachment Button -->
</form>

or this one

Preview
HTML

<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-custom-file-input 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

Preview
HTML

Readonly plain text

Readonly field

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

Preview
HTML

Disabled input

Disabled select

Disabled textarea

Disabled file input

Choose file

Disabled range input

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

Borderless form

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

Preview
HTML

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

Preview
HTML

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

Unchecked

Checked

Indeterminate

Notify about new notifications

You will receive notifications about actions to your email.

Unchecked and disabled

Checked and disabled

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

Preview
HTML

Unchecked

Checked

Unchecked

Notify about new notifications

You will receive notifications about actions to your email.

Unchecked and disabled

Checked and disabled

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

Preview
HTML

Unchecked

Indeterminate

Checked

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

Preview
HTML

Unchecked

Checked

Unchecked

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

Switches

Preview
HTML

Unchecked Checked Notify about new notifications You will receive notifications about actions to your email Checked Checked & disabled

<!-- 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">Checked</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

Preview
HTML

Valid input

Valid select Valid feedback

Valid textarea

Valid file input

Choose file

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

Preview
HTML

Valid input

Valid select Invalid feedback

Valid textarea

Valid file input

Choose file

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