Form Elements

Here you will find all support about checkbox, radio, switch,text and select inputs, as well as file upload.

Checkbox

We use Icheck plugin for checkbox and radio input to create beautiful design. If you want more information about options and methods available, please visit http://fronteed.com/iCheck/

There is 3 differents layouts and each layout have 9 various colors.

Checkbox Layout Markup

You can change style and color using data-checkbox attribute.

There are 3 styles: minimal, flat and square.

There are 9 colors: black, red, green, blue, aero, grey, orange, yellow, pink and purple.

So, if you want a minimal style with blue color, markup will be:

<input type="checkbox" data-checkbox="icheckbox_minimal-blue">

If you want a square style with red color, markup will be:

<input type="checkbox" data-checkbox="icheckbox_square-red">

Checkbox List Markup

<div class="icheck-list">
  <label><input type="checkbox"> Checkbox 1</label>
  <label><input type="checkbox"> Checkbox 2</label>
  <label><input type="checkbox"> Checkbox 3</label>
</div>

Checkbox Inline Markup

<div class="icheck-inline">
  <label><input type="checkbox"> Checkbox 1</label>
  <label><input type="checkbox"> Checkbox 2</label>
  <label><input type="checkbox"> Checkbox 3</label>
</div>

Radio Inputs

Idem as checkbox, there are available in 3 styles and 9 colors.

Checkbox Layout Markup

You can change style and color using data-radio attribute.

There are 3 styles: minimal, flat and square.

There are 9 colors: black, red, green, blue, aero, grey, orange, yellow, pink and purple.

So, if you want a minimal style with blue color, markup will be:

<input type="radio" name="radio1" data-radio="iradio_minimal-blue">

If you want a flat style with yellow color, markup will be:

<input type="radio" name="radio2" data-radio="iradio_flat-yellow">

Radio List Markup

<div class="icheck-list">
  <label><input type="radio" name="radio1"> Radio Button 1</label>
  <label><input type="radio" name="radio1"> Radio Button 2</label>
  <label><input type="radio" name="radio1"> Radio Button 3</label>
</div>

Radio Inline Markup

<div class="icheck-inline">
  <label><input type="radio" name="radio2"> Radio Button 1</label>
  <label><input type="radio" name="radio2"> Radio Button 2</label>
  <label><input type="radio" name="radio2"> Radio Button 3</label>
</div>

Switch Inputs

We have added 4 switch styles: 3 in css, and one using a jquery plugin.

Modern Look

You can change on/off text by change data-on and data-off attribute.

<label class="switch">
  <input type="checkbox" class="switch-input">
  <span class="switch-label" data-on="On" data-off="Off"></span>
  <span class="switch-handle"></span>
</label>

Android Look

You can change on/off text by changeing it directly inside inside span.

 <div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"  id="myonoffswitch1" checked>
  <label class="onoffswitch-label" for="myonoffswitch1">
    <span class="onoffswitch-inner">
      <span class="onoffswitch-active"><span class="onoffswitch-switch">ON</span></span>
      <span class="onoffswitch-inactive"><span class="onoffswitch-switch">OFF</span></span>
    </span>
  </label>
</div>

Clean Look

Below html markup to create this switch input look:

<div class="onoffswitch2">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch3" checked>
  <label class="onoffswitch-label" for="myonoffswitch3">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>

IOS Switch Button

<input type="checkbox" class="js-switch" data-color-on="red" checked/>

Select Input

We use Select 2 plugin for select input. It gives you many features, such as searching, tagging and ajax support.

For more information about options and methods available, please visit https://select2.github.io/

Basic Markup

<select class="form-control">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

If you want to enable search, add data-search="true" to select input.

If you want to enable a placeholder, add data-placeholder="Your placehoder..." to select input.

To enable multiple choices, add multiple to select input.

You can group options by adding optgroup markup. Here is an example:

<select class="form-control" data-placeholder="Choose a country...">
  <optgroup label="North America">
    <option value="USA">USA</option>
    <option value="CANADA">Canada</option>
    <option value="MEXICO">Mexico</option>
  </optgroup>
  <optgroup label="South America">
    <option value="USA">Brazil</option>
    <option value="peru">Peru</option>
    <option value="argentina">Argentina</option>
  </optgroup>
</select>

Files Uploads

Files upload are manage with Jasny Bootstrap plugin that add componenets to Bootstrap for single download, and Dropzone for multiple files download.

Dropzone markup for single and multiple download:

<form action="#" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

Single File Upload Input markup

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput">
    <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span>
  </div>
  <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Choose...</span><span class="fileinput-exists">Change</span>
  <input type="file" name="...">
  </span>
  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

Single File Upload with Image Preview markup

<div class="fileinput-new thumbnail">
  <img data-src="" src="assets/images/gallery/3.jpg" class="img-responsive">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></div>
<div>
  <span class="btn btn-default btn-file"><span class="fileinput-new">Select image...</span><span class="fileinput-exists">Change</span>
  <input type="file" name="...">
  </span>
  <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>