Form Advanced

Select2

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

Single Select

Select2 can take a regular select box like this...

Multiple Select

Select2 can take a regular select box like this...

                                                    
                                                        <!-- Single Select -->
                                                        <select class="form-control select2" data-toggle="select2">
                                                            <option>Select</option>
                                                            <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>
                                                        
                                                        <!-- Multiple Select -->
                                                        <select class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Choose ...">
                                                            <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>
                                                            <optgroup label="Mountain Time Zone">
                                                                <option value="AZ">Arizona</option>
                                                                <option value="CO">Colorado</option>
                                                                <option value="ID">Idaho</option>
                                                                <option value="MT">Montana</option>
                                                                <option value="NE">Nebraska</option>
                                                                <option value="NM">New Mexico</option>
                                                                <option value="ND">North Dakota</option>
                                                                <option value="UT">Utah</option>
                                                                <option value="WY">Wyoming</option>
                                                            </optgroup>
                                                        </select>
                                                    
                                                

Date Range Picker

A JavaScript component for choosing date ranges, dates and times.

 
                                                    
                                                        <!-- Date Range -->
                                                        <div class="mb-3">
                                                            <label class="form-label">Date Range</label>
                                                            <input type="text" class="form-control date" id="singledaterange" data-toggle="date-picker" data-cancel-class="btn-warning">
                                                        </div>

                                                        <!-- Date Range Picker With Times -->
                                                        <div class="mb-3">
                                                            <label class="form-label">Date Range Picker With Times</label>
                                                            <input type="text" class="form-control date" id="daterangetime" data-toggle="date-picker" data-time-picker="true" data-locale="{'format': 'DD/MM hh:mm A'}">
                                                        </div>

                                                        <!-- Single Date Picker -->
                                                        <div class="mb-3">
                                                            <label class="form-label">Single Date Picker</label>
                                                            <input type="text" class="form-control date" id="birthdatepicker" data-toggle="date-picker" data-single-date-picker="true">
                                                        </div>

                                                        <!-- Predefined Date Ranges -->
                                                        <div class="mb-3">
                                                            <label class="form-label">Predefined Date Ranges</label>
                                                            <div id="reportrange" class="form-control" data-toggle="date-picker-range" data-target-display="#selectedValue"  data-cancel-class="btn-light">
                                                                <i class="mdi mdi-calendar"></i>&nbsp;
                                                                <span id="selectedValue"></span> <i class="mdi mdi-menu-down"></i>
                                                            </div>
                                                        </div>
                                                    
                                                

Switch

Here are a few types of switches.

                                                    
                                                        <!-- Without label-->
                                                        <input type="checkbox" id="switch0" data-switch="none"/>
                                                        <label for="switch0" data-on-label="" data-off-label=""></label>
        
                                                        <!-- Bool Switch-->
                                                        <input type="checkbox" id="switch1" checked data-switch="bool"/>
                                                        <label for="switch1" data-on-label="On" data-off-label="Off"></label>
        
                                                        <!-- Primary Switch-->
                                                        <input type="checkbox" id="switch2" checked data-switch="primary"/>
                                                        <label for="switch2" data-on-label="On" data-off-label="Off"></label>
        
                                                        <!-- Success Switch-->
                                                        <input type="checkbox" id="switch3" checked data-switch="success"/>
                                                        <label for="switch3" data-on-label="Yes" data-off-label="No"></label>
        
                                                        <!-- Info Switch-->
                                                        <input type="checkbox" id="switch4" checked data-switch="info"/>
                                                        <label for="switch4" data-on-label="On" data-off-label="Off"></label>
        
                                                        <!-- Warning Switch-->
                                                        <input type="checkbox" id="switch5" checked data-switch="warning"/>
                                                        <label for="switch5" data-on-label="Yes" data-off-label="No"></label>
        
                                                        <!-- Danger Switch-->
                                                        <input type="checkbox" id="switch6" checked data-switch="danger"/>
                                                        <label for="switch6" data-on-label="On" data-off-label="Off"></label>
        
                                                        <!-- Dark Switch-->
                                                        <input type="checkbox" id="switch7" checked data-switch="secondary"/>
                                                        <label for="switch7" data-on-label="Yes" data-off-label="No"></label>  

                                                        <!-- Disbled Switch-->
                                                        <input type="checkbox" id="switchdis" data-switch="primary" checked disabled/>
                                                        <label for="switchdis" data-on-label="On" data-off-label="Off"></label>
                                                    
                                                

Bootstrap Datepicker

Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.

                                                    
                                                        <!-- Date Picker -->
                                                        <div class="mb-3 position-relative" id="datepicker1">
                                                            <label class="form-label">Date Picker</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-container="#datepicker1">
                                                        </div>

                                                        <!-- Date View -->
                                                        <div class="mb-3 position-relative" id="datepicker2">
                                                            <label class="form-label">Date View</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-format="d-M-yyyy" data-date-container="#datepicker2">
                                                        </div>

                                                        <!-- Multi Datepicker -->
                                                        <div class="mb-3 position-relative" id="datepicker3">
                                                            <label class="form-label">Multi Datepicker</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-multidate="true" data-date-container="#datepicker3">
                                                        </div>

                                                        <!-- Autoclose -->
                                                        <div class="mb-3 position-relative" id="datepicker4">
                                                            <label class="form-label">Autoclose</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-autoclose="true" data-date-container="#datepicker4">
                                                        </div>

                                                        <!-- Month View -->
                                                        <div class="mb-3 position-relative" id="datepicker5">
                                                            <label class="form-label">Month View</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-format="MM yyyy" data-date-min-view-mode="1" data-date-container="#datepicker5">
                                                        </div>

                                                        <!-- Year View -->
                                                        <div class="mb-3 position-relative" id="datepicker6">
                                                            <label class="form-label">Year View</label>
                                                            <input type="text" class="form-control" data-provide="datepicker" data-date-min-view-mode="2" data-date-container="#datepicker6">
                                                        </div>

                                                        <!-- Inline Datepicker -->
                                                        <div class="mb-3">
                                                            <label class="form-label">Inline Datepicker</label>
                                                            <div data-provide="datepicker-inline"></div>
                                                        </div>
                                                    
                                                

Input Masks

A jQuery Plugin to make masks on form fields and HTML elements.

e.g "DD/MM/YYYY"
e.g "HH:MM:SS"
e.g "DD/MM/YYYY HH:MM:SS"
e.g "xxxxx-xxx"
e.g "x-xx-xx-xx"
e.g "Your money"
e.g "#.##0,00"
e.g "xxxx-xxxx"
e.g "(xx) xxxx-xxxx"
e.g "(xxx) xxx-xxxx"
e.g "(xx) xxxxx-xxxx"
e.g "xxx.xxx.xxxx-xx"
e.g "xx.xxx.xxx/xxxx-xx"
e.g "xxx.xxx.xxx.xxx"
                                                    
                                                        <div class="mb-3">
                                                            <label class="form-label">Date</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00/00/0000">
                                                            <span class="font-13 text-muted">e.g "DD/MM/YYYY"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Hour</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00:00:00">
                                                            <span class="font-13 text-muted">e.g "HH:MM:SS"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Date & Hour</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00/00/0000 00:00:00">
                                                            <span class="font-13 text-muted">e.g "DD/MM/YYYY HH:MM:SS"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">ZIP Code</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00000-000">
                                                            <span class="font-13 text-muted">e.g "xxxxx-xxx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Crazy Zip Code</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="0-00-00-00">
                                                            <span class="font-13 text-muted">e.g "x-xx-xx-xx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Money</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="000.000.000.000.000,00" data-reverse="true">
                                                            <span class="font-13 text-muted">e.g "Your money"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Money 2</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="#.##0,00" data-reverse="true">
                                                            <span class="font-13 text-muted">e.g "#.##0,00"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Telephone</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="0000-0000">
                                                            <span class="font-13 text-muted">e.g "xxxx-xxxx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Telephone with Code Area</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(00) 0000-0000">
                                                            <span class="font-13 text-muted">e.g "(xx) xxxx-xxxx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">US Telephone</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(000) 000-0000">
                                                            <span class="font-13 text-muted">e.g "(xxx) xxx-xxxx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">São Paulo Celphones</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="(00) 00000-0000">
                                                            <span class="font-13 text-muted">e.g "(xx) xxxxx-xxxx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">CPF</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="000.000.000-00" data-reverse="true">
                                                            <span class="font-13 text-muted">e.g "xxx.xxx.xxxx-xx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">CNPJ</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="00.000.000/0000-00" data-reverse="true">
                                                            <span class="font-13 text-muted">e.g "xx.xxx.xxx/xxxx-xx"</span>
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">IP Address</label>
                                                            <input type="text" class="form-control" data-toggle="input-mask" data-mask-format="099.099.099.099" data-reverse="true">
                                                            <span class="font-13 text-muted">e.g "xxx.xxx.xxx.xxx"</span>
                                                        </div>
                                                    
                                                

Bootstrap Touchspin

A mobile and touch friendly input spinner component for Bootstrap. Specify attribute data-toggle="touchspin" and your input would be conveterted into touch friendly spinner.

                                                    
                                                        <div class="mb-3">
                                                            <label class="form-label">Using data attributes</label>
                                                            <input data-toggle="touchspin" type="text" value="55">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Example with postfix (large)</label>
                                                            <input data-toggle="touchspin" value="18.20" type="text" data-step="0.1" data-decimals="2" data-bts-postfix="%">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">With prefix</label>
                                                            <input data-toggle="touchspin" type="text" data-bts-prefix="$">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Change button class</label>
                                                            <input data-toggle="touchspin" value="77" type="text" data-bts-button-down-class="btn btn-danger" data-bts-button-up-class="btn btn-info">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Init with empty value:</label>
                                                            <input data-toggle="touchspin" type="text">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Max value - (Default value 100)</label>
                                                            <input data-toggle="touchspin" data-bts-max="500" value="128" data-btn-vertical="true" type="text">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">With prefix and postfix button</label>
                                                            <input data-toggle="touchspin" data-bts-prefix="A Button" data-bts-prefix-extra-class="btn btn-light"  data-bts-postfix="A Button" data-bts-postfix-extra-class="btn btn-light" type="text">
                                                        </div>
                                                    
                                                

Bootstrap Maxlength

Uses the HTML5 attribute "maxlength" to work. Just specify data-toggle="maxlength" attribute to have maxlength indication on any input.

The badge will show up by default when the remaining chars are 10 or less:

Satrt displaying the indication when reached to some threshhold. Specift the data attribute threshold. E.g. data-threshold="12"

All you need to do is specify the data attribute placement. The possible positions are left, top, right, bottom-right, top-right, top-left, bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'. E.g. data-placement="top"

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

                                                    
                                                        <div class="mb-3">
                                                            <label class="form-label">Default usage</label>
                                                            <p class="text-muted font-13">
                                                                The badge will show up by default when the remaining chars are 10 or less:
                                                            </p>
                                                            <input type="text" class="form-control" maxlength="25" data-toggle="maxlength">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Threshold value</label>
                                                            <p class="text-muted font-13">
                                                                Satrt displaying the indication when reached to some threshhold. Specift the data attribute <code>threshold</code>. E.g.
                                                                <code>data-threshold="12"</code>
                                                            </p>
                                                            <input type="text" class="form-control" maxlength="25" data-toggle="maxlength" data-threshold="12">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Position</label>
                                                            <p class="text-muted font-13">
                                                                All you need to do is specify the data attribute <code>placement</code>. The possible positions are left, top, right, bottom-right, top-right, top-left, 
                                                                bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'.
                                                                E.g. <code>data-placement="top"</code>
                                                            </p>
                                                            <input type="text" class="form-control" maxlength="25" data-toggle="maxlength" data-placement="top">
                                                        </div>
                                                        
                                                        <div>
                                                            <label class="form-label">Textareas</label>
                                                            <p class="text-muted font-13">
                                                                Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
                                                            </p>
                                                            <textarea data-toggle="maxlength" class="form-control" maxlength="225" rows="3" 
                                                                placeholder="This textarea has a limit of 225 chars."></textarea>
                                                        </div>
                                                    
                                                

Typeahead

Typeahead.js is a fast and fully-featured autocomplete library.

                                                    
                                                        <div class="mb-3">
                                                            <label class="form-label">The Basics</label>
                                                            <input type="text" class="form-control" data-provide="typeahead" id="the-basics" placeholder="Basic Example">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Bloodhound (Suggestion Engine)</label>
                                                            <input id="bloodhound" class="form-control" type="text" placeholder="States of USA">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Prefetch</label>
                                                            <input type="text" class="form-control" data-provide="typeahead" id="prefetch" placeholder="States of USA">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Remote</label>
                                                            <input type="text" class="form-control" data-provide="typeahead" id="remote" placeholder="States of USA">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Custom Templates</label>
                                                            <input id="custom-templates" class="form-control" type="text" placeholder="States of USA">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Default Suggestions</label>
                                                            <input type="text" class="form-control" data-provide="typeahead" id="default-suggestions">
                                                        </div>
                                                        
                                                        <div class="mb-3">
                                                            <label class="form-label">Multiple Datasets</label>
                                                            <input type="text" class="form-control" data-provide="typeahead" id="multiple-datasets">
                                                        </div>
                                                    
                                                

Timepicker

Easily select a time for a text input using your mouse or keyboards arrow keys. Specify attribute data-toggle="timepicker" and you would have nice timepicker input element.

                                                    
                                                        <div class="mb-3">
                                                            <label class="form-label">Default Time Picker</label>
                                                            <div class="input-group" id="timepicker-input-group1">
                                                                <input id="timepicker" type="text" class="form-control" data-provide="timepicker">
                                                                <span class="input-group-text"><i class="dripicons-clock"></i></span>
                                                            </div>
                                                        </div>

                                                        <div class="mb-0">
                                                            <label class="form-label">24 Hour Mode Time Picker E.g. <code>data-show-meridian="false"</code></label>
                                                            <div class="input-group" id="timepicker-input-group2">
                                                                <input id="timepicker2" type="text" class="form-control" data-provide='timepicker' data-show-meridian="false" >
                                                                <span class="input-group-text"><i class="dripicons-clock"></i></span>
                                                            </div>
                                                        </div>
                                                    
                                                        <div class="mb-0">
                                                            <label class="form-label">Specify a step for the minute field E.g. <code>data-minute-step="5"</code></label>
                                                            <div class="input-group" id="timepicker-input-group3">
                                                                <input id="timepicker3" type="text" class="form-control" data-provide='timepicker' data-minute-step="5">
                                                                <span class="input-group-text"><i class="dripicons-clock"></i></span>
                                                            </div>
                                                        </div>
                                                    
                                                
Settings
Color Scheme

Width

Left Sidebar

Purchase Now