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]"

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

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>

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>