Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Default

We'll never share your email with anyone else.

Sizing

Checkboxes & Radio

Button Groups

<div class="form-group">
  <label>Size</label>
  <div class="btn-group-toggle btn-group-square" data-toggle="buttons">
    <label class="btn active">
      <input type="checkbox" name="options" id="option1" checked> S
    </label>
    <label class="btn">
      <input type="checkbox" name="options" id="option2"> M
    </label>
    <label class="btn">
      <input type="checkbox" name="options" id="option3"> L
    </label>
    <label class="btn">
      <input type="checkbox" name="options" id="option4"> XL
    </label>
  </div>
</div>

<div class="form-group">
  <label>Color</label>
  <div class="btn-group-toggle btn-group-square btn-group-colors" data-toggle="buttons">
    <label class="btn active text-red">
      <input type="checkbox" name="options" id="option1-2" checked>
    </label>
    <label class="btn text-blue">
      <input type="checkbox" name="options" id="option2-2">
    </label>
    <label class="btn text-yellow">
      <input type="checkbox" name="options" id="option3-2">
    </label>
    <label class="btn text-green">
      <input type="checkbox" name="options" id="option4-2">
    </label>
  </div>
</div>

Range Slider

<input type="text" class="rangeslider" name="Range Slider" data-min="0" data-max="1000" data-from="200" data-to="800"/>
data-min="0"
Minimal value
data-max="1000"
Maximal Value
data-from="200"
Range starting from
data-to="800"
Range up to