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

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

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

Toggle Switches

A css only toggle built-in style of this template with some jquery for interaction.

Source Code

<div class="br-toggle br-toggle-rounded br-toggle-primary on">  <div class="br-toggle-switch"></div></div>

Class Reference

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">  <div class="input-group-prepend">    <span class="input-group-text"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>  </div>  <input type="text" class="form-control" placeholder="Username"></div><!-- input-group -->

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

<input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY">

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.

Source Code

<input id="tpBasic" type="text" class="form-control" placeholder="Set time">

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