Make Admin Template Documentation

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

### Square Skin

Checkbox List

Checkbox 1 Checkbox 2

Inline Checkboxes

Checkbox 1 Checkbox 2

### Flat Skin

Checkbox List

Checkbox 1 Checkbox 2

Inline Checkboxes

Checkbox 1 Checkbox 2

### Minimal Skin

Checkbox List

Checkbox 1 Checkbox 2

Inline Checkboxes

Checkbox 1 Checkbox 2

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

### Minimal Skin

Radio List

Radio Button 1 Radio Button 1

Inline Radios

Radio Button 1 Radio Button 2

### Square Skin

Radio List

Radio Button 1 Radio Button 2

Inline Radios

Radio Button 1 Radio Button 2

### Flat Skin

Radio List

Radio Button 1 Radio Button 2

Inline Radios

Radio Button 1 Radio Button 2

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

ON OFF
ON OFF

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

You can change ON / OFF color with `data-color`.

You can modify color by changing `data-color-on` and `data-color-off` attribute.

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

Select with search
Select with Image includes
Loading Data Example
Multiple Select

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>