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...

Multiple Select

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

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.

Bootstrap FileStyle

Input Tag

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.

Default file input

File style without input

Small file style

Disable file style

File style with custom icon

File style with button style

Form Validation - Basic Form

Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server.

Form Validation - Horizontal Form

Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server.

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 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.

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.

Summernote Editor

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

Hello Summer note
  • Select a text to reveal the toolbar.
  • Edit rich document on-the-fly, so elastic!
Theme Customizer
Download Now
 Choose Demos