Select 2 source
Single Select

Just apply .ls-select2 class to a select element.

with Groups

Just use optgroups with label attribute inside select element.

Multiple Select

Just use multiple attribute inside select element.

Bootstrap Select source
Single Select

Just apply .ls-bootstrap-select class to a select element

with Groups

Just use optgroups with label attribute inside select element.

Multiple Select

Just use multiple attribute inside select element.

Live Search

Just use data-live-search="true" attribute inside select element to enable live search.

Keywords

Add key words to options to improve their searchability using data-tokens.

Limit Selected Items

Limit the number of options that can be selected via the data-max-options attribute.

Multiple Select source
Default

Just apply .ls-multi-select class to a select element to make it a multi-select

Pre-Selected Options

Just use selected attribute on the options which you want to keep as selected

with Groups

Just use optgroups with label attribute inside select element

Switch Toggles source
Basic Switch

Just apply .ls-switch class to a checkbox to make it a switch

Sizes

use data-size attribute to change the size of the switch

Colors

use data-color="#007dcc" to change the color of the switch

Clock Time Picker source
Default

Just apply .ls-clockpicker class to an input to make it a clockpicker

Autoclose and align top left

use data-autoclose="true" attribute to auto-close clockpicker after the date is selected and data-placement="left",data-align="top" for placement of the clockpicker

Date Picker source
Default

Just apply .ls-datepicker class to a input.

Date Range

Just apply .ls-datepicker classes to both inputs.

to
Inline

Just apply .ls-datepicker classes to a div element.

Time Picker source
Default

Just apply .ls-timepicker class to an input.

Show Duration

Use data-duration="true" attribute to show the time duration.

Time Format

Use data-format="H:i:s" attribute to change the time format.