Form Elements


Checkbox controls

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .check-primary)

example :

<div class="checkbox check-default">
    <input type="checkbox" checked="checked" value="1" id="checkbox1">
    <label for="checkbox1">Keep Me Signed in</label>
</div>

<div class="checkbox check-success  ">
    <input type="checkbox" checked="checked" value="1" id="checkbox2">
    <label for="checkbox2">I agree</label>
</div>

<div class="checkbox check-primary">
    <input type="checkbox" checked="checked" value="1" id="checkbox3">
    <label for="checkbox3">Mark</label>
</div>

<div class="checkbox check-info">
    <input type="checkbox" checked="checked" value="1" id="checkbox4">
    <label for="checkbox4">Steve Jobs</label>
</div>

<div class="checkbox check-warning">
    <input type="checkbox" checked="checked" value="1" id="checkbox5">
    <label for="checkbox5">Action</label>
</div>

<div class="checkbox check-danger">
    <input type="checkbox" checked="checked" value="1" id="checkbox6">
    <label for="checkbox6">Mark as read</label>
</div>
Shape options

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it

example :

<div class="checkbox check-default checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox7">
    <label for="checkbox7">Keep Me Signed in</label>
</div>

<div class="checkbox check-success checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox8">
    <label for="checkbox8">I agree</label>
</div>

<div class="checkbox check-primary checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox9">
    <label for="checkbox9">Mark</label>
</div>
State options

These act the same way as normal HTML check boxes. Here are some states that

example :

<div class="checkbox check-success">
    <input type="checkbox" disabled="disabled" value="check1" name="check" id="check1">
    <label for="check1">Checkbox No. 1</label>
</div>
<div class="checkbox check-success">
    <input type="checkbox" disabled="disabled" checked="checked" value="check2" name="check" id="check2">
    <label for="check2">Checkbox No. 2</label>
</div>

Toggle controls

Do not delete the label element which is placed next to each radio. Leave it blank if you don't want it to hold any text

example :

<div class="radio radio-default">
    <input type="radio" checked="checked" value="yes" name="radio1" id="radio1Yes">
    <label for="radio1Yes">Agree</label>
    <input type="radio" value="no" name="radio1" id="radio1No">
    <label for="radio1No">Disagree</label>
</div>

<div class="radio radio-success">
    <input type="radio" checked="checked" value="yes" name="radio2" id="radio2Yes">
    <label for="radio2Yes">Male</label>
    <input type="radio" value="no" name="radio2" id="radio2No">
    <label for="radio2No">Female</label>
</div>

<div class="radio radio-primary">
    <input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
    <label for="radio3Yes">High</label>
    <input type="radio" value="no" name="radio3" id="radio3No">
    <label for="radio3No">Low</label>
</div>

<div class="radio radio-info">
    <input type="radio" checked="checked" value="yes" name="radio4" id="radio4Yes">
    <label for="radio4Yes">HTML</label>
    <input type="radio" value="no" name="radio4" id="radio4No">
    <label for="radio4No">JS</label>
</div>

<div class="radio radio-warning">
    <input type="radio" checked="checked" value="yes" name="radio5" id="radio5Yes">
    <label for="radio5Yes">Chrome</label>
    <input type="radio" value="no" name="radio5" id="radio5No">
    <label for="radio5No">Firefox</label>
</div>

<div class="radio radio-danger">
    <input type="radio" checked="checked" value="yes" name="radio6" id="radio6Yes">
    <label for="radio6Yes">iOS</label>
    <input type="radio" value="no" name="radio6" id="radio6No">
    <label for="radio6No">Android</label>
</div>
State options

Use of different color opacity helps to destigues between different states such as disable

example :

<div class="radio radio-primary">
    <input type="radio" disabled="disabled" value="Disabled" name="Disabled" id="Disabled">
    <label for="Disabled">Disabled</label>
    <input type="radio" disabled="disabled" checked="checked" value="ADisabled" name="ADisabled" id="ADisabled">
    <label for="ADisabled">Disabled</label>
</div>

Slide toggles

jQuery users

These are powered by Switchery jQuery plugin. Follow these steps to initialize a sliding toggle in your page

Please refer to Switchery Documentation to learn about plugin options

Step one

Include the stylesheet switchery.min.css inside the <head>. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/switchery/css/switchery.min.css">
Step two

Include the required javascript files inside the <body> before core template script inclusions. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/switchery/js/switchery.min.js"></script>
Step three

Create an ordinary checkbox control with a unique classname

<input type="checkbox" class="switchery" checked />
<input type="checkbox" class="switchery" />
Step four

Apply the plugin to your desired element

When initializing the plugin, it is recommended that you only use the hex codes of Pages contextual colors to maintain consistency.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
// Success color: #10CFBD
elems.forEach(function(html) {
  var switchery = new Switchery(html, {color: '#10CFBD'});
});
</script>

Step two

Add the following markup

<input type="checkbox" class="js-switch" ng-model="Model" ui-switch="{color: '#10cfbd'}" checked="checked" />

Typhead

These are also know as auto-fill input boxes that fills up while you type. This is powered by Bootstrap typhead, you can view there official documentation here

jQuery users
Step One

Include the required javascript files inside the <body> before core template script inclusions, if they are not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"></script>
<script src="assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"></script>
Step Two

Create a simple textbox field and give it an ID so you can initialize in your JS file

<div class="form-group">
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>

<form class="" role="form">
<div class="form-group form-group-default required typehead" id="sample-three">
<label>Countries</label>
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>
</form>
Step Three

Initialize your typehead with the ID you use

        var countries = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.whitespace,
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: 'http://pages.revox.io/json/countries-list.json'
        });

        // passing in `null` for the `options` arguments will result in the default
        // options being used
        $('#mytyphead').typeahead(null, {
          name: 'countries',
          source: countries
        });

Selects

Default select

Default select depends on classie.js. Make sure it's included inside the <body> before core template script inclusions. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>

Add .cs-select and .cs-skin-slide to any <select> control to add a cool animation effect

example :

<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">
    <option value="Web-safe">Web-safe</option>
    <option value="Helvetica">Helvetica</option>
    <option value="SegeoUI">SegeoUI</option>
</select>
Advance Select
jQuery users

Pages uses Select2 jQuery plugin for advance selects with search facility. Follow these steps to initialize the plugin

Step one

Include the stylesheet select2.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-select2/select2.css">
Step two

Include the required javascript files inside the <body> before core template script inclusions, if they are not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap-select2/select2.min.js" type="text/javascript"></script>
Step three

Append data attribute data-init-plugin="select2" to initialize any <select> automatically with basic options. Avoid auto-initializing when you want to have advance options

<form role="form">
    <div class="form-group">
        <!-- Using data-init-plugin='select2' automatically initializes a basic Select2 -->
        <select class="full-width" data-init-plugin="select2">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
        </select>
    </div>

    <div class="form-group">
        <!-- Element intended to use with advance options -->
        <input type="hidden" id="mySelect2" class="full-width">
    </div>
</form>
Step four

Apply the plugin to your desired element

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    // Avoid applying plugin to <select> with data-init-plugin="select2"

    // Only apply on elements that don't have data-init-plugin="select2" 
    $("#mySelect2").select2({
        placeholder: "Select a type",
        data: [{
            id: 0,
            text: 'enhancement'
        }, {
            id: 1,
            text: 'bug'
        }, {
            id: 2,
            text: 'duplicate'
        }]
    });
});
</script>

Step three

Add following markup to your page

<ui-select ng-model="person.selected" theme="bootstrap">
    <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | filter: $select.search">
        <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
        <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
    </ui-select-choices>
</ui-select>

Datepicker

jQuery users

Datepicker controls in Pages are powered by Bootstrap Datepicker plugin.

Please refer to Bootstrap Datepicker Documentation to learn about plugin options

Step one

Include the stylesheet datepicker3.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">
Step two

Include the relevant javascript files inside the <body> before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">
Step three

Add the markup

<div id="myDatepicker" class="input-group date">
    <input type="text" class="form-control">
    <span class="input-group-addon"><i class="fa fa-calendar"></i>
    </span>
</div>
Step four

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#myDatepicker').datepicker();
});
</script>

Masked inputs

jQuery users

Allows the user to enter fixed width input while conforming to a character format. Powered by jQuery Masked Input plugin.

Please refer to jQuery Masked Input Documentation to learn about plugin options

Step one

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js" type="text/javascript">
Step two

Add the markup.

<input type="text" id="phone" class="form-control">
Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $("#phone").mask("(999) 999-9999");
});
</script>

Autonumeric inputs

jQuery users

autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs.

Please refer to jQuery autoNumeric Documentation to learn about plugin options

Step one

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/jquery-autonumeric/autoNumeric.js" type="text/javascript">
Step two

Add the markup.

<input type="text" data-a-dec="." data-a-sep="," class="autonumeric form-control">
Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('.autonumeric').autoNumeric('init');
});
</script>

WYSIWYG Editors

jQuery users

Give your users a rich text editing experience with these simple and fully-fledged WYSIWYG editors

Bootstrap wysihtml5

Please refer to Bootstrap wysihtml5 Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap3-wysihtml5.min.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css">
Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
Step three

Add the markup.

<textarea id="wysiwyg5" class="wysiwyg" placeholder="Enter text ..." style="height:250px"></textarea>
Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#wysiwyg5').wysihtml5();
});
</script>

<div class="wysiwyg5-wrapper b-a b-grey">
    <textarea id="wysiwyg5" class="wysiwyg demo-form-wysiwyg" placeholder="Enter text ..." ui-jq="wysihtml5" ui-options="{
    html: true,
    stylesheets: ['pages/css/editor.css']
}"></textarea>
</div>
Summernote
jQuery users

Please refer to Summernote Documentation to learn about plugin options

Step one

Include the stylesheet summernote.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/summernote/css/summernote.css">
Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script type="text/javascript" src="assets/plugins/summernote/js/summernote.min.js"></script>
Step three

Add the markup.

<div id="summernote">Hello Summernote</div>
Step four

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
   $('#summernote').summernote();
});
</script>

Tag inputs

jQuery users

jQuery tags input plugin is based on Twitter Bootstrap.

Please refer to jQuery tags input Documentation to learn about plugin options

Step one

Include the stylesheet bootstrap-tagsinput.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">
Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>
Step two

Add the markup.

<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />
Step three

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

example :

<script>
$(document).ready(function() {
    $('#tagsinput').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});
</script>

Drag n' Drop

jQuery users

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Please refer to DropzoneJS Documentation to learn about plugin options

Step one

Include the stylesheet dropzone.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.css">
Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules

<script src="assets/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
Step three

Add .dropzone to initialize dropzone plugin with default options.

example :

<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

For native Bootstrap form controls Bootstrap Documentation