#### Input

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Use different types of class with `.form-control` class which contains input field.

Find input style options below :

Input style options | Class | Description
--- | --- | ---
Rounded Input | `.round` | Use this class for round styled input.
Square Input | `.square` | Use this class for square styled input.
Input Sizing | `..form-control-[lg/sm]` | Use this class for different input sizing.
Input with Icons | `.has-icon-left` | Default icon align is right. For left align icon use this class with `form-group`.
Input with Icons Divider | `.has-icon-left.input-divider-[left/right]` | For use divider between icon and input text box use this class with `form-group`.
Custom File Input | `.custom-file .custom-file-input` | For Custom File Input, use `.custom-file-input` class within `.custom-file` class.
Input Validation with Tooltips | `.{valid/invalid}-tooltip` | For use Tooltip Validation use this class and add js code for template page.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://getbootstrap.com/docs/4.3/components/forms/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-inputs.html

#### Floating Label Input

Floating Labels are used for inline styling where form controls comes before its label. Add `.form-label-group` class to the parent of input and label tags to have floating label form styling.

You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..

###### HTML Markup:

                        <div class="form-label-group">
                            <input type="text" class="form-control" id="floating-label1" placeholder="Label-placeholder">
                            <label for="floating-label1">Label-placeholder</label>
                        </div>

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-inputs.html#floating-label-input

#### Textarea Input

Textarea input options with different classes and advance options.

Some textarea input options below that can be used :

Textarea Input Options | Class | Description
--- | --- | ---
Floating Label | `.form-label-group` | Use `.form-label-group` to add a Floating Label with Textarea.
Counter | `.char-textarea` | Use `.char-textarea` with `textarea`tag for counting text-length.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://getbootstrap.com/docs/4.3/components/forms/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-textarea.html

#### Switch

Some options that can be possible with Switch below :

Switch options | Class | Description
--- | --- | ---
Basic Swtich | `.switch-label` | Use class `.switch-label` to add a label to switch.
Colors | `.custom-switch-#{$colorName}` | Use this class to change switch's color alongwith `.switch-label`.
Text | `.switch-text-left & .switch-text-right` | Use the both classes inside of `.custom-control-label` to create a switch with text.
Icons | `.switch-icon-left & .switch-icon-right` | Use the both classes inside of `.custom-control-label` to create a switch with icon.
Sizes | `.switch-{md / lg}` | Use this class with `.custom-switch` for medium or large size

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-switch.html

#### Checkbox

Form checkbox options with different classes and advance options.

Some checkbox options below that can be used :

Checkbox Options | Class | Description
--- | --- | ---
Vuexy Checkboxes | `.vs-checkbox-con` | To add a checkBox, we have the `.vs-checkbox-con` as a wrapper. Also use `.vs-checkbox` for better output.
Color Checkbox | `.vs-checkbox-{value}` | To change the color of the checkBox use the `.vs-checkbox-{value}` for different colors.
Checkbox with Icons | `.vs-icon` | Use `.vs-icon` to change change the internal icon inside the checkbox.
Checkbox Sizes | `.vs-checkbox-{sm/lg}` | To add a checkBox with different sizes, we have the this classes for different sizes with `.vs-checkbox` class.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-checkbox.html

#### Radio

Form radio options with different classes and advance options.

Some radio options below that can be used :

Radio Options | Class | Description
--- | --- | ---
Vuexy Radio Buttons | `.vs-radio-{colorName}` | To change the color of the radio use the .vs-radio-{colorName} for different colors.
Radio Sizes | `.vs-radio-{sm/lg}` | To add a radio with different sizes, we have the this classes for different sizes with `.vs-radio` class.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-radio.html

#### Input Group

Form Input Group options with different classes and advance options.

Inout Group Options | Class | Description
--- | --- | ---
With Checkbox / Radio | `.vs-{checkbox/radio}-con` | To add checkbox or radio button with input groups, use this class.
Different Sizes | `.input-group-{lg/sm}` | Add this class to `.input-group` for Large/Small addon/prepend.
With Buttons | `.input-group-btn` | Add span with `.input-group-btn` class and add button inside before or after <input>
With Dropdown | `.dropdown-toggle` | Add <button> with `.dropdown-toggle` class and add dropdown-menu after it to get input group with dropdown.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-input-groups.html

#### Number Input

Number input options with different classes and advance options. Using Bootstrap Touchspin plugin for Number Input Element.

Some number input options below that can be used :

Number Input Options | Class | Description
--- | --- | ---
Touchspin | `.touchspin` | Add `.touchspin` class with input tag to add touchspin input group
Decimal | `data-bts-step & data-bts-decimals` | Set `data-bts-step` and `data-bts-decimals` attributes for decimal type Input Touchspin.
Min - Max | `min and max` | Set `min` and `max` attributes values for minimum and maximum in page js file.
Step | `step` | Set `step` attribute value in page js file.
Decimal | `data-bts-button-down-class & data-bts-button-up-class` | set `data-bts-button-down-class` & `data-bts-button-up-class` attribute and add value as btn btn-{color} for different colors spinner.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://www.virtuosoft.eu/code/bootstrap-touchspin/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-number-input.html

#### Select2

Select2 supports a wide variety of options that allow you to customize it to your needs.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="select2.full.min.js"></script>
                        <link rel="stylesheet" type="text/css" href="select2.min.css">

###### 2. Call the select2-function after the page has loaded

                        $(".select2").select2();

You have to add plugin js and css. Some options that can be possible with select2 below :

Select2 options | Class | Description
--- | --- | ---
Basic select2 | `.select2` | For basic select2, use this class. you can use this class for multiple select2 also. Use `multiple="multiple"` attribute for multiple select box.
Select2 with icon | `data-icon` | Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.
Sizes | `.select2-size-[lg/sm]` | Use this class for large & small size of select2.
Background Color | `.select2-bg` | Use this class with `data-bgcolor` & `data-bgcolor-variation` attributes for background color of control.
Full Background Color | `.select2-full-bg` | Use this class with `data-bgcolor` & `data-bgcolor-variation` attributes for full select2 background color.
Border Color | `.select2-border` | Use this class with `data-border-color` & `data-border-variation` attributes for Border color of control.

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://select2.github.io/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-select.html

#### Date & Time Picker

The basic setup requires targetting an `input` element and invoking the picker.

###### Initialize the plugin by referencing the necessary files:

                            <script src="picker.js"></script>
                            <script src="picker.date.js"></script>
                            <script src="picker.time.js"></script>
                            <script src="legacy.js"></script>
                            <link rel="stylesheet" type="text/css" href="pickadate.css">

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://amsul.ca/pickadate.js/
Github Page | https://github.com/amsul/pickadate.js
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/form-date-time-picker.html