#### 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
Date Range Picker With Times
Single Date Picker
Predefined Date Ranges

                                                            <!-- 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
Date View
Multi Datepicker
Autoclose
Month View
Year View
Inline Datepicker

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

Date e.g "DD/MM/YYYY"
Hour e.g "HH:MM:SS"
Date & Hour e.g "DD/MM/YYYY HH:MM:SS"
ZIP Code e.g "xxxxx-xxx"
Crazy Zip Code e.g "x-xx-xx-xx"
Money e.g "Your money"
Money 2 e.g "#.##0,00"
Telephone e.g "xxxx-xxxx"
Telephone with Code Area e.g "(xx) xxxx-xxxx"
US Telephone e.g "(xxx) xxx-xxxx"
São Paulo Celphones e.g "(xx) xxxxx-xxxx"
CPF e.g "xxx.xxx.xxxx-xx"
CNPJ e.g "xx.xxx.xxx/xxxx-xx"
IP Address 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.

Using data attributes
Example with postfix (large)
With prefix
Change button class
Init with empty value:
Max value - (Default value 100)
With prefix and postfix button

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

Default usage

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

Threshold value

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

Position

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

Textareas

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.

The Basics
Bloodhound (Suggestion Engine)
Prefetch
Remote
Custom Templates
Default Suggestions
Multiple Datasets

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

Default Time Picker
24 Hour Mode Time Picker E.g. `data-show-meridian="false"`
Specify a step for the minute field E.g. `data-minute-step="5"`

                                                            <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

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now