Tabler
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Action Another action
Separated link

Documentation

Browse source code
On this page

Form elements

Bootstrap documentation

Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.

Classic inputs

Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.

<div class="mb-3">
  <label class="form-label">Text</label>
  <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder">
</div>
<div class="mb-3">
  <label class="form-label">Password</label>
  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder">
</div>

Form control rounded

Use the form-control-rounded class if you prefer form controls with rounded corners.

<div class="mb-3">
  <label class="form-label">Form control rounded</label>
  <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
  <div class="input-icon">
    <input type="text" class="form-control form-control-rounded" placeholder="Search…">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
  </div>
</div>

Form control flush

You can remove borders from your form control by adding the form-control-flush class.

<div class="mb-3">
  <label class="form-label">Form control flush</label>
  <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>

Input with icon

Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.

<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="input-icon mb-3">
    <input type="text" class="form-control" placeholder="Search…">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <!-- SVG icon code -->
    </span>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Loader input</label>
  <div class="input-icon mb-3">
    <input type="text" class="form-control" placeholder="Loading…">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
    </span>
    <input type="text" class="form-control" placeholder="Loading…">
  </div>
</div>

Separated inputs

Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.

<div class="mb-3">
  <label class="form-label">Separated inputs</label>
  <div class="row row-sm">
    <div class="col">
      <input type="text" class="form-control" placeholder="Search for…">
    </div>
    <div class="col-auto">
      <a href="#" class="btn btn-white btn-icon" aria-label="Button">
        <!-- SVG icon code -->
      </a>
    </div>
  </div>
</div>

Textarea and select

Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.

Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.

Select
Select multiple
<div class="mb-3">
  <label class="form-label">Textarea</label>
  <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder"></textarea>
</div>
<div class="mb-3">
  <div class="form-label">Select</div>
  <select class="form-select" >
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-3">
  <div class="form-label">Select multiple</div>
  <select class="form-select"  multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Validation states

To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.

Invalid feedback
<div class="mb-3">
  <label class="form-label">Validation States</label>
  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
  <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
  <div class="invalid-feedback">Invalid feedback</div>
</div>

Subtle validation states

If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.

<div class="mb-3">
  <label class="form-label">Validation States</label>
  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
</div>

Input size

Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.

<div class="mb-3">
  <label class="form-label">Input sizing</label>
  <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
  <input class="form-control mb-2" type="text" placeholder="Default input">
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>

Image check

Add an image check to your form and give users visually attractive options to choose from.

<div class="mb-3">
  <label class="form-label">Image Check</label>
  <div class="row row-sm">
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Book, fairy lights" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Healthy Dinner" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
        <span class="form-imagecheck-figure">
          <img src="..." alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
        </span>
      </label>
    </div>
    <div class="col-6 col-sm-4">
      <label class="form-imagecheck mb-2">
        <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
        <span class="form-imagecheck-figure">
          <img src="..." alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
        </span>
      </label>
    </div>
  </div>
</div>

Input color

Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.

<div class="mb-3">
  <label class="form-label">Color Input</label>
  <div class="row row-sm">
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="dark" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-dark"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput form-colorinput-light">
        <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
        <span class="form-colorinput-color bg-white"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="blue" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-blue"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="azure" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-azure"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-indigo"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="purple" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-purple"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="pink" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-pink"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="red" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-red"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="orange" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-orange"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-yellow"></span>
      </label>
    </div>
    <div class="col-auto">
      <label class="form-colorinput">
        <input name="color" type="radio" value="lime" class="form-colorinput-input" />
        <span class="form-colorinput-color bg-lime"></span>
      </label>
    </div>
  </div>
</div>

Input color picker

Add an color picker to your form to let users customise it according to their preferences.

<div class="mb-3">
  <label class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
</div>

Datalists

Use the datalist element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.

<div class="mb-3">
  <label class="form-label">Datalist example</label>
  <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
  <datalist id="datalistOptions">
    <option value="Aruba"/>
    <option value="Afghanistan"/>
    <option value="Angola"/>
    <option value="Anguilla"/>
    <option value="Albania"/>
    <option value="Andorra"/>
    <option value="United Arab Emirates"/>
    <option value="Argentina"/>
    <option value="Armenia"/>
    <option value="American Samoa"/>
  </datalist>
</div>

Custom selectboxes

Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.

<div class="mb-3">
  <label class="form-label">Simple selectgroup</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
      <span class="form-selectgroup-label">Other</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Selectgroup with icons and text</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label"><!-- SVG icon code -->
        Home</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="user" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
        User</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="circle" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
        Circle</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="square" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- SVG icon code -->
        Square</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Different style</label>
  <div class="form-selectgroup form-selectgroup-pills">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>

Advanced selectboxes

Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.

<div class="mb-3">
  <label class="form-label">Payment method</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-visa payment-sm mr-2"></span>
          ending in <strong>7998</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-mastercard payment-sm mr-2"></span>
          ending in <strong>2807</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-paypal payment-sm mr-2"></span>
        </div>
      </div>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Project Manager</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Paweł Kuna</div>
            <div class="text-muted">UI Designer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input"  checked>
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar mr-3">JL</span>
          <div class="lh-sm">
            <div class="strong">Jeffie Lewzey</div>
            <div class="text-muted">Chemical Engineer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Mallory Hulme</div>
            <div class="text-muted">Geologist IV</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Dunn Slane</div>
            <div class="text-muted">Research Nurse</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="mr-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar mr-3" style="background-image: url(...)"></span>
          <div class="lh-sm">
            <div class="strong">Emmy Levet</div>
            <div class="text-muted">VP Product Management</div>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>

Toggle switches

Use toggle switches for the elements of your form which require choosing between two opposing states.

Toggle switches
Single switch
<div class="mb-3">
  <div class="form-label">Toggle switches</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" checked>
    <span class="form-check-label">Option 1</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">Option 2</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">Option 3</span>
  </label>
</div>
<div class="mb-3">
  <div class="form-label">Single switch</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox">
    <span class="form-check-label">I agree with terms and conditions</span>
  </label>
</div>

Radios

Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.

Radios
Inline Radios
<div class="mb-3">
  <div class="form-label">Radios</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="radio" checked>
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio">
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" disabled>
      <span class="form-check-label">Option 3</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" checked disabled>
      <span class="form-check-label">Option 4</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <div class="form-label">Inline Radios</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" checked>
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio">
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" disabled>
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Checkboxes

Use checkoxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.

Checkboxes
Inline Checkboxes
<div class="mb-3">
  <div class="form-label">Checkboxes</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" disabled>
      <span class="form-check-label">Disabled checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" checked>
      <span class="form-check-label">Checked checkbox input</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <div class="form-label">Inline Checkboxes</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox">
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" disabled>
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" checked>
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Range input

Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.

<div class="mb-3">
  <label class="form-label">Range input</label>
  <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10">
  <div class="form-range mb-2" id="range-simple"></div>
  <div class="form-range mb-2" id="range-connect"></div>
  <div class="form-range mb-2 text-green" id="range-color"></div>
</div>

Fieldset

Group parts of your form to make it well-structured and clearer for users, using the fieldset element.

<fieldset class="form-fieldset">
  <div class="mb-3">
    <label class="form-label required">Full name</label>
    <input type="text" class="form-control" autocomplete="off"/>
  </div>
  <div class="mb-3">
    <label class="form-label required">Company</label>
    <input type="text" class="form-control"  autocomplete="off"/>
  </div>
  <div class="mb-3">
    <label class="form-label required">Email</label>
    <input type="email" class="form-control"  autocomplete="off"/>
  </div>
  <div class="">
    <label class="form-label">Phone number</label>
    <input type="tel" class="form-control" autocomplete="off"/>
  </div>
</fieldset>

Input group

Create a group of input controls and place add-ons on either side of an input.

@
.tabler.io
https:// .tabler.io 
<div class="mb-3">
  <label class="form-label">Input group</label>
  <div class="input-group mb-2">
    <span class="input-group-text">
      @
    </span>
    <input type="text" class="form-control"  placeholder="username" >
  </div>
  <div class="input-group mb-2">
    <input type="text" class="form-control"  placeholder="subdomain" >
    <span class="input-group-text">
      .tabler.io
    </span>
  </div>
  <div class="input-group">
    <span class="input-group-text">
      https://
    </span>
    <input type="text" class="form-control"  placeholder="subdomain" >
    <span class="input-group-text">
      .tabler.io
    </span>
  </div>
</div>

Input with checkboxes or radios

Add checkboxes or radio buttons on either side of your input control.

<div class="mb-3">
  <label class="form-label">Input with checkbox or radios</label>
  <div class="input-group mb-2">
    <span class="input-group-text">
      <input class="form-check-input m-0" type="checkbox" checked>
    </span>
    <input type="text" class="form-control" >
  </div>
  <div class="input-group">
    <input type="text" class="form-control" >
    <span class="input-group-text">
      <input class="form-check-input m-0" type="radio" checked>
    </span>
  </div>
</div>

Input with prepended or appended text

Add text to your input control, either before or after the text which is to be entered by a user.

https://tabler.io/users/
.tabler.io 
<div class="mb-3">
  <label class="form-label">Input with prepended text</label>
  <div class="input-group input-group-flat mb-2">
    <span class="input-group-text">
      https://tabler.io/users/
    </span>
    <input type="text" class="form-control pl-0"  value="yourfancyusername">
  </div>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control text-right pr-0"  value="yourfancydomain">
    <span class="input-group-text">
      .tabler.io
    </span>
  </div>
</div>

Include a link in your input control to add a clickable element within the control.

Show password 
<div class="mb-3">
  <label class="form-label">Input with appended link</label>
  <div class="input-group input-group-flat">
    <input type="password" class="form-control"  value="ultrastrongpassword">
    <span class="input-group-text">
      <a href="#" class="input-group-link">Show password</a>
    </span>
  </div>
</div>

Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.

<div class="mb-3">
  <label class="form-label">Input with appended icon links</label>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" >
    <span class="input-group-text">
      <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><!-- SVG icon code -->
      </a>
      <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><!-- SVG icon code -->
      </a>
      <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><!-- SVG icon code -->
      </a>
    </span>
  </div>
</div>