Forms

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

Form example

The following example is a classical form for login or register pages:

Email address

Example textarea

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Input with icon

Create input elements with icons using the following morkup:

Icon Left

Icon Right

<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">
    </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">
        <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:

Username

Please choose a username.

First name

Looks good!

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

Select input

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

Country

<label class="my-1 me-2" for="country">Country</label>
<select class="form-select" id="country" aria-label="Default 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>

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:

Example textarea

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

Default file input example

Multiple files input example

Disabled file input example

Small file input example

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

Checkboxes Round

Default checkbox

Disabled checkbox

<div class="mb-3">
    <span class="h6 font-weight-bold">Checkboxes Round</span>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck10">
    <label class="form-check-label" for="defaultCheck10">
        Default checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck20" disabled>
    <label class="form-check-label" for="defaultCheck20">
        Disabled checkbox
    </label>
</div>

Radio buttons

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

Radios

Default radio

Second default radio

Disabled radio

<fieldset>
    <legend class="h6">Radios</legend>
    <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>
    <!-- End of Radio -->
</fieldset>

Switches

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

Default switch input

Checked switch input

Disabled switch input

Disabled checked switch input

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

Datepicker Pro

Birthday

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

Searchable select Pro

Use the following markup to create searchable inputs:

Select state:

<div class="mb-2">
    <label class="my-1 me-2" for="state">Select state:</label>
    <select id="state" class="w-100" name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

Javascript

var selectStateInputEl = d.querySelector('#state');
if(selectStateInputEl) {
    const choices = new Choices(selectStateInputEl);
}

Multi searchable select Pro

Use the following markup to create searchable inputs:

Select states:

<div class="mb-2">
    <label class="my-1 me-2" for="states">Select states:</label>
    <select id="states" class="w-100" name="states">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

Javascript

// multiple
var selectStatesInputEl = d.querySelector('#states');
if(selectStatesInputEl) {
    const choices = new Choices(selectStatesInputEl);
}

Read more about the plugin powering these components from our Choices.js 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 -->