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

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

Toggle Switches

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

Source Code

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

Class Reference

Class	Values
class="br-toggle br-toggle-[value]"	primary | success | warning | danger | info | teal | indigo | purple | pink | orange
class="br-toggle br-toggle-rounded"	Convert the toggle button to rounded shape

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').inputmask('99/99/9999');
$('#phoneMask').inputmask('(999) 999-9999');
$('#ssnMask').inputmask('999-99-9999');

Input Tags

User interface for managing tags, powered by Select2's built-in tagging mode.

Amsterdam Washington Sydney Beijing Cairo

Source Code

<select class="form-control select2-tag" multiple>
  <option value="Amsterdam" selected>Amsterdam</option>
  ...
</select>

$('.select2-tag').select2({ tags: true });

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

Native HTML5 time input -- the browser supplies the picker UI (clock or scroll wheel, depending on platform), with no JS dependency.

Default Time Picker: Pre-filled with a default value: Dynamically set the time using a Javascript Date object:

Source Code

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

Javascript Code

$('#setTimeButton').on('click', function () {
  var now = new Date();
  $('#tp3').val(now.toTimeString().slice(0, 5));
});

Color Picker

Native HTML5 color input -- the browser's own color picker, with no JS dependency. It does not support alpha transparency or custom swatch palettes; use a <datalist> of presets if a limited palette is needed.

Source Code

<input type="color" id="colorpicker" value="#17A2B8">

A palette of presets can be offered alongside the native picker using a <datalist>.

Source Code

<input type="color" value="#DC3545" list="colorPresets">
<datalist id="colorPresets">
  <option value="#1D2939"></option>
  ...
</datalist>

Range Slider

Native HTML5 range input, with no JS dependency. Dual-handle (min/max) ranges are built from a synced pair of native sliders, since the browser only exposes a single-handle range control.

HTML Code

<input type="range" class="custom-range" id="rangeslider1" min="0" max="100" value="50">

Javascript Code

$('#rangeslider1').on('input', function () {
  $('#rangeslider1Out').text(this.value);
});