Advanced Plugins

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.

Switchery

Basic

Add an attribute data-plugin="switchery" data-color="@colors" to your input element and it will be converted into switch.

Sizes

Add an attribute data-size="small",data-size="large" to your input element and it will be converted into switch.

Secondary color

Add an attribute data-color="@color" data-secondary-color="@color" to your input element and it will be converted into switch.

Multiple Select

Default

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support.

Grouped Options

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support.

Searchable

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support.

Select2

Single Select

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

Multiple Select

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

Auto Complete

Bootstrap MaxLength

Default usage

The badge will show up by default when the remaining chars are 10 or less:

Threshold value

Do you want the badge to show up when there are 20 chars or less? Use the thresholdoption:

All the options

Please note: if the alwaysShowoption is enabled, the thresholdoption is ignored.

Position

All you need to do is specify the placementoption, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

textareas

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