Bootstrap Tokenfield
Basic
Basic tokenfield
Disabled tokenfield
Search icon
Validation States
Tokenfield supports all the default validation states from Bootstrap.
Various examples of using tokenfield
Using tokenfield with input groups.
Advanced Usage
Using With Typeahead.
Using Events For complex example.
Tags Input
Markup 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. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.
Objects as tags
Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.
Categorizing tags
You can set a fixed css class for your tags, or determine dynamically by provinding a custom function.
Select 2
Basic
Select2 can take a regular select box.
Multi-Value
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.
Placeholder
A placeholder value can be defined and will be displayed until a selection is made. Select2 uses the placeholder attribute on multiple select boxes.
Minimum Input
Search with text input with minimum length by using data-minimum-input-length="2".
Disabled
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.
Color
Add class select2-info, select2-success, select2-waring, select2-dangerthe element's parent to add color styles.
Typeahead
Basics
Bloodhound (Suggestion Engine)
Multi-Select
Simple
Public Methods
Bootstrap Select
Basic
Select boxes with option:
Select boxes with option groups:
Select box with tick icon on single select with the show-tick class:
Styles
You can set the button classes via the data-style attribute:
Limit the number of selections
Limit the number of options that can be selected via the data-max-options attribute. It also works for option groups. Customize the message displayed when the limit is reached with maxOptionsText.
Selected Text Format
Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select.
Key words
Add key words to options to improve their searchability using data-tokens.
Selected Title
Set the title attribute on individual options to display alternative text when the option is selected:
Option Divider
Add data-divider="true" to an option to turn it into a divider.
Option Icon
Add an icon to an option or optgroup with the data-icon attribute:
Option Subtext
Add subtext to an option or optgroup with the data-subtext attribute:
Spinner
AsSpinner
Use class="basicspinner" to create a basic spinner,you can extend by data-option.
Default Spinner
Custom Format
Disabled
Bootstrap Touchspin
Use data-plugin="touchSpin" to create a Bootstrap style spinner,you can extend by data-option .
Postfix
Prefix
Vertical
Clockpicker
Default
Use class="clockpicker" create it.
Auto Colse
Add data-autoclose="true" to open the autoclose.
Jquery Timepicker
Basic
Use class="basictimepicker" create a basic timepicker.
Duration
Adding data-show-duration="true" to set the duration.
Reset Current
You can reset current time.
Date Picker
Default Datepicker
Add class="datepicker" to create a default datepicker. use data-multidate="true" to selecting multi dates.
Date Range
Set name="start" and name="end" for date range.
Inline
You also can set the datepicker to be inline and flat.
Datepair.Js
Add datepair.js file to make datepicker with a pair.
Color Picker
Simple Mode
Use class="asColorPicker" to make a simple mode color picker.
Complex Mode
Add data-mode="complex" to make a complex mode color picker.
Gradient Mode
Add data-mode="gradient" can generate CSS3 gradient by the mode.
Toggle Switches
Basic
Use data-plugin="switchery" attribute to your checkbox input.
Colors
Add attribute data-color to change colors style.
Size
Add data-size="large" ,data-size="small" to change size of the switch element via size.
Labelauty
Use data-plugin="labelauty" to your checkbox input.
Labeled Checkbox
Labeled Radio
Non-Labeled Checkbox
Non-Labeled Radio
Slider Range
Default
Range
With Tooltip
Tooltip With Range
Range Point
Card
Use class="card-wrapper" to make card. And card number start 34,35,40,51,65.