# 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="name@example.com">
    </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">
              <svg class="icon icon-xxs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </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">
              <svg class="icon icon-xxs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </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">
            <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        </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:

    <label class="my-1 me-2" for="states">Select states:</label>
    <select id="states" class="w-100 mb-0" name="states[]" multiple="multiple">
        <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>

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