Form Advanced
Select2
Single Select
Select2 can take a regular select box like this...
Multiple Select
Select2 can take a regular select box like this...
Tags Input
Input Tags
Just add data-role="tagsinput"to your input field to automatically change it to a tags input field.
True multi value
Use a <select multiple />as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array.
Switchery
Basic
Add an attribute data-plugin="switchery" data-color="@colors" to your input element and it will be converted into switch.
Sizes & Secondary color
Add an attribute data-size="small",data-size="large" to your input element and it will be converted into switch. Add an attribute data-color="@color" data-secondary-color="@color" to your input element and it will be converted into switch.
Bootstrap MaxLength
Default usage
The badge will show up by default when the remaining chars are 10 or less:
Threshold value
Do you want the badge to show up when there are 20 chars or less? Use the thresholdoption:
All the options
Please note: if the alwaysShowoption is enabled, the thresholdoption is ignored.
Position
All you need to do is specify the placementoption, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.
Textareas
Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
Bootstrap-select
Create your <select> with the .selectpicker class.
It also works with option groups:
You can also show the tick icon on single selectwith the show-tickclass:
And with multiple selects:
You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.
You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.
Add an icon to an option or optgroup with the data-iconattribute:
You can add a search input by passing data-live-search="true"attribute:
You can also use the titleattribute as an alternative to display when the option is selected:
Using the data-selected-text-formatattribute on a multiple select you can specify how the selection is displayed.
Add the disabledattribute to the select to apply the disabledclass.
Timepicker
Easily select a time for a text input using your mouse or keyboards arrow keys.
Colorpicker
Add color picker to field or to any other element.
Input Masks
Your awesome text goes here.Your awesome text goes here.
Date Range Picker
A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.
Date Picker
The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. Click elsewhere on the page or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
