## Forms

There are four general styles available to style forms: `.form-horizontal`, `.form-condensed`, `.label-left` and no style for horizontal placed inputs, decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.

### Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

### Prepended and appended inputs

Again Bootstrap helps. It has everything we need to prepend and append inputs.

### Textareas

Auto-growing textarea uses Grab Bag autogrow plugin to increase area size dynamically. Files:

    lib/jquery.autogrow-textarea.js

Wysiwyg editor is based on bootstrap-wysihtml5 plugin. Files:

    lib/bootstrap-wysihtml5/bootstrap-wysihtml5.js

### Selects

Two different type of selects avaiables in Light Blue template:

- Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
- Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.

Required files:

    lib/select2.js
    lib/bootstrap-select/bootstrap-select.js

### Checkboxes and Radio

To style default checkboxes and radio buttons iCheck library is used. Files:

    lib/icheck.js/jquery.icheck.js

Note! Light Blue versions 1.0-1.2 uses Uniform as a checkbox styling library. Check previous documentation if needed.

### Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.

You also can add `data-toggle-class` attribute to your buttons so they change their class depending on state. For example:

    <div class="btn-group" data-toggle="buttons-radio">
        <button class="btn" data-toggle-class="btn-success">One</button>
        <button class="btn btn-success active" data-toggle-class="btn-success">Two</button>
    </div>

### On-Off Switches

There is a special plugin to do that - Bootstrap switch. Include following files:

    lib/bootstrap-switch.js

### Pickers

Any field may have either Datepicker or Colorpicker attached. Required files:

    lib/bootstrap-datepicker.js
    lib/bootstrap-colorpicker.js

### Input Sizing

Any input can be sized by adding `.span*` class or `.input-block-level` if 100% width required.

### Masked Inputs

To make any input accept only formatted values there is a great plugin to use - Masked Input Plugin. Files:

    lib/jquery-maskedinput/jquery.maskedinput.js