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.

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. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Select2

Single Select

Select2 can take a regular select box like this...

Select Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia Select

Multiple Select

Select2 can take a regular select box like this...

Alaska Hawaii California Nevada Oregon Washington Arizona Colorado Idaho Montana Nebraska New Mexico North Dakota Utah Wyoming Alabama Arkansas Illinois Iowa Kansas Kentucky Louisiana Minnesota Mississippi Missouri Oklahoma South Dakota Texas Tennessee Wisconsin Connecticut Delaware Florida Georgia Indiana Maine Maryland Massachusetts Michigan New Hampshire New Jersey New York North Carolina Ohio Pennsylvania Rhode Island South Carolina Vermont Virginia West Virginia

Disabled results

Select2 will correctly handle disabled results, both with data coming from a standard select (when the disabled attribute is set) and from remote sources, where the object has disabled: true set.

First Second (disabled) Third First

Bootstrap FileStyle

Default file input

Choose file

File style without input

Choose file

Small file style

Choose file

Disable file style

Choose file

File style with custom text

Select file

File style with button style

Choose file

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.

Date Range Picker

A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.

Clock Picker

A clock-style timepicker for Bootstrap (or jQuery).Your awesome text goes here.

Default Clock Picker Auto close Now time Place at left, align the arrow to top