Forms

Overview

The form controls consist of <input>s, <select>s and <textarea>s. They all need the .form-control class to get their styling. You can see examples below:

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[e-mail]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Size

You can vary the height from large to small.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Checkboxes and Radio

We have restyled the checkbox and radio buttons. You will need to use the custom classes .poly-check and .poly-radio to use them instead of the default controls.

<div class="row">
    <div class="col-5">
        <input type="checkbox" id="checkbox-1" checked>

        <label for="checkbox-1" class="checkbox">
            <span class="poly-checkbox"></span> 
            <span class="input-label">Active</span>  
        </label>
    </div>
    <div class="col-6">
        <input type="checkbox"  id="checkbox-2">
        
        <label for="checkbox-2" class="checkbox">  
            <span class="poly-checkbox"></span> 
            <span class="input-label">Normal</span> 
        </label>
    </div>
</div>
<div class="row">
    <div class="col-5">
        <input type="radio" id="radio-1" checked="checked" name="radio">
        
        <label for="radio-1" class="radio">
        	<span class="poly-radio"></span> <span class="input-label">Active</span>
		</label>
    </div>
    <div class="col-6">
        <input type="radio"  id="radio-2" name="radio"> 
        
        <label for="radio-2" class="radio" >   
            <span class="poly-radio"></span> <span class="input-label">Normal</span> 
        </label>
    </div>
</div>

Disabled Inputs

You can add the disabled boolean attribute on an input to prevent user interactions.

<label>Disabled Input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

If you want to see more examples and properties please check the official Bootstrap Documentation.