##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Form Advanced Elements

### Select 2 official website

#### Basic

Create a basic select2 by using `data-plugin="select2"`.

#### Multi-Balue

Add `multiple` to create a multi select2.

#### Placeholders

You can define placeholder easily by using `data-placeholder="Select a State"`.

#### Minimum Input

Custom Search, texts input with min length by using `data-minimum-input-length="2"`.

#### Disabled

Use `disabled` to set disabled state.

#### Color

Add class `select2-primary`, `select2-success`, `select2-info`, `select2-waring`, `select2-danger` the element's parent to add color styles.

### Bootstrap Select official website

#### Basic

It also works with option groups:

You can also show the tick icon on single `select` with the `show-tick` class:

The bootstrap menu arrow can be added with the `show-menu-arrow` class:

#### Styles

You can set different Bootstrap classes via the `data-style` attribute:

#### Multiple Selects

You can limit the number of elements you are allowed to select via the `data-max-option` attribute. It also works for option groups.

#### Selected Text Format

Using the `data-selected-text-format` attribute on a `multiple select` you can specify how the selection is displayed.

#### Live Search

You can add a search input by passing `data-live-search="true"` attribute:

#### Alternative Title

You can also use the `title` attribute as an alternative to display when the option is selected:

#### Option Divider

Add `data-divider="true"` to an option to turn it into a divider.

#### Option Icon

Add an icon to an option or optgroup with the `data-icon` attribute:

#### Option Subtext

Add subtext to an option or optgroup with the `data-subtext` attribute:

### Bootstrap Tokenfield official website

#### Basic

Disabled tokenfield

With search icon

#### Validation States

Tokenfield supports all the default validation states from Bootstrap

Input with success
Input with warning
Input with error

#### With input groups

You can limit the number of elements you are allowed to select via the `data-max-option` attribute. It also works for option groups.

Tags:

#### Advanced Usage

Using With Typeahead.

Using Events For complex example.

### Tags Input official website

#### Input Tags

Just add `data-role="tagsinput"` to your input field to automatically change it to a tags input field.

#### True Multi Value

Use a `<select multiple />` as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing `<option />` elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

#### Objects as tags

Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.

#### Categorizing tags

You can set a fixed css class for your tags, or determine dynamically by provinding a custom function.

### Multi-Select official website

#### Simple

#### Public Methods

### Typeahead official website The typeahead autocomplete plugin for Twitter's Bootstrap 3 base on Twitter's typeahead.js.

#### Basics

#### Bloodhound (Suggestion Engine)

#### Prefetch

#### Style

### Maxlength Control official website

#### Input

`max-length` set to 35.

#### Textarea

`max-length` set to 100.

### Spinner official website

#### AsSpinner

Use `data-plugin="asSpinner"` to create a basic spinner,also can extend by `data-option` .

#### Default Spinner

#### Custom Format

#### Disabled

#### Bootstrap Touchspin

Use `data-plugin="touchSpin"` to create a Bootstrap style spinner,also can extend by `data-option` .

#### Postfix

#### Prefix

#### Vertical

### Icheck official website

#### Checkboxes

Create checkbox by adding `data-plugin="iCheck"`, `type="checkbox"`.

- Unchecked
- Checked
- Disabled Unchecked
- Checked Disabled

#### Radios

Create radio by adding `data-plugin="iCheck"`, `type="radio"`.

- Unchecked
- Checked
- Disabled Unchecked
- Checked Disabled

#### Color Options

Add class `.icheckbox-primary`, `.icheckbox-green`, `.icheckbox-orange`, `.icheckbox-red`, `.icheckbox-grey` to add colors style.

### Toggle Switches official website

#### Basic

Use `data-plugin="switchery"` and `type="checkbox"` to create a basic switcher.

Off
On
Disabled Off
Disabled On

#### Colors

Add attr `data-color` to change colors style.

#### Size

Add `data-size="large"` ,`data-size="small"` to change size.

### Clockpicker official website

#### Default

Use `data-plugin="clockpicker"` create it.

#### Auto Colse

Add `data-autoclose="true"` to open the autoclose.

### Jquery Timepicker official website

#### Basic

Use `data-plugin="timepicker"` create a basic timepicker.

#### Duration

Adding `data-min-time`, `data-max-time`, `data-show-duration="true"` to set the duration.

#### Reset Current

You can reset current time.

### Date Picker official website

#### Default Datepicker

Add `data-plugin="datepicker"` to create a default datepicker. use `data-multidate="true"` to selecting multi dates.

#### Date Range

Set `name="start"` and `name="end"` for date range.

to

#### Inline

You also can set the datepicker to be inline and flat.

### Datepair.Js official website

Add `datepair.js` file to make datepicker with timepicker be a pair.

to

### Color Picker official website

#### Simple Mode

Use `data-plugin="asColorPicker"`, `data-mode="simple"` to make a simple mode colorpicker.

#### Complex Mode

Add `data-mode="complex"` to change mode.

#### Gradient Mode

Add `data-mode="gradient"` ,then,you can generate CSS3 gradient by the mode.

Use `data-plugin="asRange"` to make a default slider range.Add `data-range="true"`, `data-tip=true`, ...to change mode or add tooltip...

#### Default

#### Range

#### With Tooltip

Use `data-plugin="strength"` to make a password strength validation.

Password
Password

Use `data-plugin="knob"` init plugin, and also can set options with attributes 'data-option'.

#### Disable display input

#### 'cursor' mode

#### Display previous value

#### 5-digit values, step 1000

#### Angle offset

#### Angle offset and arc

Add `data-plugin="labelauty"` to use it.

#### Labeled Checkbox

#### Labeled Radio

#### Non-Labeled Checkbox

Unchecked
Checked
Disabled Checked
Disabled Unchecked

#### Non-Labeled Radio

Unchecked
Checked
Disabled Checked
Disabled Unchecked

Use `data-plugin="card"` ,`data-target="#card-container"` to make it.

Card Number
Full Name
Expiry
CVC