1. Home
  2. Form

Advanced Form Elements

Spinners

Please check out here Official Documentation

Quantity

Just add data-rule="quantity" to your input field.

Currency

Just add data-rule="currency" to your input field.

Percent

Just add data-rule="percent" to your input field.

Month

Just add data-rule="month" to your input field.

Hour

Just add data-rule="hour" to your input field.

Customize (even number less than 200)

Old = , New =

Tags Input

Please check out here Official Documentation

Markup

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.

Objects as tags

Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.

Typeahead

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library.

Categorizing tags

You can set a fixed css class for your tags, or determine dynamically by providing a custom function.

MaxLength

Please check out here Official Documentation

Default usage

max-length set to 25 char. The badge will show up by default when the remaining chars are 10 or less

Change the threshold value

max-length set to 25 char. Do you want the badge to show up when there are 20 chars or less? Use the threshold option

All the options

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the alwaysShow option is enabled, the threshold option is ignored.

Textareas

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

Position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.
All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

Select2

jQuery based replacement for select boxes

Basics
Single select boxes

Multiple
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

Placeholders
A placeholder value can be defined and will be displayed until a selection is made. Select2 uses the placeholder attribute on multiple select boxes, which requires IE 10+. You can support it in older versions with the Placeholders.js polyfill.

Loading array data
Select2 provides a way to load the data from a local array.

MultiSelect

Please check out here Official Documentation

Pre-selected options

Optgroup

Public methods

Custom Header and Footer

Select Splitter

Please check out here Official Documentation

Note editors

Native textarea and background-images based text editor

Default
With margin