Forms

Use form elements such as text inputs, textareas, file uploads and many more to get input from you users

Example

The following example includes an email input type, a password, and a textarea field:

We'll never share your email with anyone else. 
<div class="mb-3">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email">
    <small id="emailHelp" class="form-text text-gray">We'll never share your email with anyone else.</small>
</div>
<div class="mb-3">
    <label for="exampleInputIconPassword">Password</label>
    <div class="input-group">
        <span class="input-group-text" id="basic-addon3"><span class="fas fa-unlock-alt"></span></span>
        <input type="password" class="form-control" id="exampleInputIconPassword" placeholder="Password" aria-label="Password" aria-describedby="basic-addon3">
    </div>
</div>
<div class="mb-3">
  <label for="textarea">Example textarea</label>
  <textarea class="form-control" placeholder="Enter your message..." id="textarea" rows="4"></textarea>
</div>

Icons

Create input elements with icons using the following markup:

<div class="mb-3">
    <label for="exampleInputIconLeft">Icon Left</label>
    <div class="input-group">
        <span class="input-group-text" id="basic-addon1"><span class="fas fa-search"></span></span>
        <input type="text" class="form-control" id="exampleInputIconLeft" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
    </div>
</div>
<div class="mb-3">
    <label for="exampleInputIconRight">Icon Right</label>
    <div class="input-group">
        <input type="text" class="form-control" id="exampleInputIconRight" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
        <span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
    </div>
</div>

Validation

Use the following modifier classes to add success or error states to form elements:

Looks good!
Please choose a username. 
<div class="mb-3">
  <label for="validationServer01">First name</label>
  <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
  <div class="valid-feedback">
    Looks good!
  </div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-4">
  <label for="validationServerUsername">Username</label>
  <input type="text" class="form-control is-invalid" id="validationServerUsername" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Select input

The following example is how the select inputs look and can be used:

<label class="my-1 me-2" for="select">Country</label>
<select class="form-select" id="select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">USA</option>
    <option value="2">Canada</option>
    <option value="3">UK</option>
</select>

Multiple select

The following example is how the select inputs look and can be used:

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Textarea

The following example is how textareas can be used:

<label for="textarea">Example textarea</label>
<textarea class="form-control" placeholder="Enter your message..." id="textarea" rows="4"></textarea>

File upload

The following example is how file uploads can be used:

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>

Checkboxes

Use the .form-check modifier class to create checkboxes:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked>
    <label class="form-check-label" for="defaultCheck1">
      First Option
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
    <label class="form-check-label" for="defaultCheck2">
      Second Option
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
    <label class="form-check-label" for="defaultCheck3">
      Third Option
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck4" disabled>
    <label class="form-check-label" for="defaultCheck4">
      Disabled checkbox
    </label>
</div>

Radio buttons

Here are a few radio button examples with a variety of stateS:

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Switches

Use these custom switches to add toggle functionality for your website:

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch input</label>
</div>

Floating labels Pro

Use the following example to use material UI style floating labels by adding the form-floating class:

<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
    <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Password</label>
</div>

Input with button Pro

Use the following example to combine input fields with dropdown buttons:

<div class="input-group mb-3">
    <button class="btn btn-tertiary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Select <span class="icon icon-xs ms-1"><span class="fas fa-chevron-down"></span></span> </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
    <input type="text" class="form-control" id="exampleInputDropdown" aria-label="Text input with dropdown button">
</div>
<div>
    <label for="inputGroupSelect">Custom Select</label>
    <div class="input-group">
        <select class="form-select" id="inputGroupSelect" aria-label="Example select with button addon">
          <option selected>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
        <button class="btn btn-tertiary" type="button"><span class="icon icon-xs me-1"><span class="fas fa-search"></span></span> Search</button>
    </div>
</div>

Datepicker Pro

<label for="birthday">Birthday</label>
<div class="input-group">
    <span class="input-group-text"><span class="far fa-calendar-alt"></span></span>
    <input data-datepicker="" class="form-control" id="birthday" type="text" placeholder="dd/mm/yyyy" required>
</div>

Read more about the datepicker plugin from our official guide.

Range Slider Pro

<div class="input-slider-container">
    <div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
    <!-- Input slider values -->
    <div class="row mt-3 d-none">
        <div class="col-6">
            <span class="range-slider-value" data-range-value-low="200"></span>
        </div>
    </div>
</div>

Range slider count Pro

<!-- Range slider container -->
<div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
<!-- Range slider values -->
<div class="row d-none">
    <div class="col-6">
        <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
    </div>
    <div class="col-6 text-right">
        <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
    </div>
</div>
<!-- End of range slider values -->