Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Form Elements

Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.

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>
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>
Input Groups

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

@ex.com
$.00

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

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

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

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>

Source Code

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

Source Code

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

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

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

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

Javascript Code

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