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.
<!-- Daterangepicker css -->
<link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css" type="text/css" />
<!-- Daterangepicker js -->
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<!-- 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>
<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.
<!-- Bootstrap Datepicker css -->
<link href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Datepicker js -->
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- 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>
Flatpickr - Date picker
A lightweight and powerful datetimepicker
<div class="mb-3">
<label class="form-label">Basic</label>
<input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
</div>
<div class="mb-3">
<label class="form-label">Date & Time</label>
<input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
</div>
<div class="mb-3">
<label class="form-label">Human-friendly Dates</label>
<input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
</div>
<div class="mb-3">
<label class="form-label">MinDate and MaxDate</label>
<input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
</div>
<div class="mb-3">
<label class="form-label">Disabling dates</label>
<input type="text" id="disable-datepicker" class="form-control" placeholder="Disabling dates">
</div>
<div class="mb-3">
<label class="form-label">Selecting multiple dates</label>
<input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
</div>
<div class="mb-3">
<label class="form-label">Selecting multiple dates - Conjunction</label>
<input type="text" id="conjunction-datepicker" class="form-control" placeholder="2018-10-10 :: 2018-10-11">
</div>
<div class="mb-3">
<label class="form-label">Range Calendar</label>
<input type="text" id="range-datepicker" class="form-control" placeholder="2018-10-03 to 2018-10-10">
</div>
<div>
<label class="form-label">Inline Calendar</label>
<input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
</div>
Flatpickr - Time Picker
A lightweight and powerful datetimepicker
<div class="mb-3">
<label class="form-label">Default Time Picker</label>
<div class="input-group">
<input id="basic-timepicker" type="text" class="form-control" placeholder="Basic timepicker">
<span class="input-group-text"><i class="ri-time-line"></i></span>
</div>
</div>
<div class="mb-0">
<label class="form-label">24-hour Time Picker</label>
<div class="input-group">
<input id="24hours-timepicker" type="text" class="form-control" placeholder="16:21">
<span class="input-group-text"><i class="ri-time-line"></i></span>
</div>
</div>
<div class="mb-3">
<label class="form-label">Time Picker w/ Limits</label>
<div class="input-group">
<input id="minmax-timepicker" type="text" class="form-control" placeholder="Limits">
<span class="input-group-text"><i class="ri-time-line"></i></span>
</div>
</div>
<div class="mb-0">
<label class="form-label">Preloading Time</label>
<div class="input-group">
<input id="preloading-timepicker" type="text" class="form-control" placeholder="Pick a time">
<span class="input-group-text"><i class="ri-time-line"></i></span>
</div>
</div>
Input Masks
A jQuery Plugin to make masks on form fields and HTML elements.
<!-- Input Mask js -->
<script src="assets/vendor/jquery-mask-plugin/jquery.mask.min.js"></script>
<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.
<!-- Bootstrap Touchspin css -->
<link href="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Touchspin js -->
<script src="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
<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.
<!-- Bootstrap Maxlength js -->
<script src="assets/vendor/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
<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>
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.
<!-- Bootstrap Timepicker css -->
<link href="assets/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Timepicker js -->
<script src="assets/vendor/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<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="ri-time-line"></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="ri-time-line"></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="ri-time-line"></i></span>
</div>
</div>
Typeahead
Typeahead.js is a fast and fully-featured autocomplete library.
<!-- Typehead -->
<script src="assets/vendor/handlebars/handlebars.min.js"></script>
<script src="assets/vendor/typeahead.js/typeahead.bundle.min.js"></script>
<!-- Typehead Demo js -->
<script src="assets/js/pages/demo.typehead.js"></script>
<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>