Basic Form Input

A basic form control with disabled and readonly mode.

Source Code

<input class="form-control" placeholder="Input box" type="text"> <input class="form-control" placeholder="Input box" type="text" readonly> <input class="form-control" placeholder="Input box" type="text" disabled>

Valid State Input

A form control with success, warning and error state.

Source Code

<input class="form-control is-valid" placeholder="Input box" type="text"> <input class="form-control is-warning" placeholder="Input box" type="text"> <input class="form-control is-invalid" placeholder="Input box" type="text">

Custom Checkboxes and Radios

A custom styled checkboxes and radios.

Checkbox Source Code

<label class="ckbox"> <input type="checkbox"> <span>Checkbox Unchecked</span> </label>

Radiobox Source Code

<label class="rdiobox"> <input name="rdio" type="radio"> <span>Radio Unchecked</span> </label>

Active State Color Variant

A custom styled checkboxes and radios with colored active state.

Source Code

<label class="ckbox ckbox-success">...</label> <label class="rdiobox rdiobox-success">...</label>

Class Reference

Class	Values
class="ckbox ckbox-[value]"	success | warning | danger | info | teal | indigo | purple | pink | orange | dark
class="rdiobox rdiobox-[value]"

Custom Select Box

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Source Code

<select class="form-control select2" data-placeholder="Choose Browser"> <option value="Firefox">Firefox</option> <option value="Chrome">Chrome</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Internet Explorer">Internet Explorer</option> </select>

File Browser

A custom styled file browser.

Source Code

<label class="custom-file"> <input type="file" id="file" class="custom-file-input"> <span class="custom-file-control"></span> </label>

Toggle Switches

A lightweight jQuery plugin that creates easily-styleable toggle buttons.

Source Code

<div class="toggle-wrapper"> <div class="toggle toggle-light primary"></div> </div> <div class="toggle-wrapper"> <div class="toggle toggle-modern primary"></div> </div>

Class Reference

Class	Values
class="toggle toggle-light [value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange
class="toggle toggle-modern [value]"

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

Source Code

<div class="input-group"> <span class="input-group-addon"><i class="icon ion-person tx-16 lh-0 op-6"></i></span> <input type="text" class="form-control" placeholder="Username"> </div>

Input Mask

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).

Source Code

$('#dateMask').mask('99/99/9999'); $('#phoneMask').mask('(999) 999-9999'); $('#ssnMask').mask('999-99-9999');

Input Tags

User interface for managing tags.

Source Code

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">

Date Picker

The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.

Default Functionality

Source Code

<div class="input-group"> <span class="input-group-addon"><i class="icon ion-calendar tx-16 lh-0 op-6"></i></span> <input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY"> </div>

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Source Code

$('#datepickerNoOfMonths').datepicker({ showOtherMonths: true, selectOtherMonths: true, numberOfMonths: 2 });

Display the datepicker embedded in the page instead of in an overlay.

Source Code

<div class="fc-datepicker"></div>

Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys.

Default Time Picker: Set the scroll position to local time if no value selected: Dynamically set the time using a Javascript Date object:

Source Code

<div class="input-group"> <span class="input-group-addon"><i class="fa fa-clock-o tx-16 lh-0 op-6"></i></span> <input id="tpBasic" type="text" class="form-control" placeholder="Set time"> </div>

Javascript Code

$('#tpBasic').timepicker();

Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop.

Javascript Code

$('#colorpicker').spectrum({ color: '#17A2B8' });

You can allow alpha transparency selection. Check out these example.

Javascript Code

$('#showAlpha').spectrum({ color: 'rgba(23,162,184,0.5)', showAlpha: true });

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.

Javascript Code

$('#showPaletteOnly').spectrum({ showPaletteOnly: true, showPalette:true, color: '#DC3545', palette: [ ['#1D2939', '#FFF', '#0866C6','#23BF08', '#F49917'], ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6'] ] });

Range Slider

Simple, small and fast javascript/jquery slider element.

HTML Code

<input type="text" id="rangeslider1" name="example_name" value="" />

Javascript Code

$('#rangeslider1').ionRangeSlider();