Advanced form components

Autocomplete inputs give you search options while typing. You can use either the autocomplete from Typeahead or jQuery, whichever you prefer.

When you need a certain color, colorpickers can be useful. Just pick a color, and your input recieves the correct hex or rgb(a) color.

Datepickers provide a simple way to select a single date. Using these in your template helps ensure that a user's specification of a date input is valid and formatted correctly. Datepickers can be used as a dropdown on an input field but also inline on a form.

This file uploader (Dropzone) can handle multiple files, gives previews of images, has drag and drop support and is easy to implement.

Storing properly formatted data is important. Masked inputs can help to accomplish this.

Use this multi-select to display the user multiple options.

• If you want the option filtering in a <select>, you only have to add the javascript code $('select').select2();.
• Select2 also supports multi-value select boxes. Just add the multiple attribute and Select2 automatically picks up on this.

Sliders let users select a value from a continuous or discrete range of values by moving the slider thumb. Sliders can have the selected value on the side.

Spinners are similar to combo boxes and lists in that they let the user choose from a range of values. Like editable combo boxes, spinners allow the user to type in a value. They are often used when the set of possible values is extremely large.

• Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.
• 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.