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();