Form Advanced

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

Hello Summer note

  • Select a text to reveal the toolbar.
  • Edit rich document on-the-fly, so elastic!