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...
SelectMultiple 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.
FirstBootstrap 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.
| « | May 2025 | » | ||||
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
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!