Form Advanced

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

Ajax Lookup

Your awesome text goes here

Local Lookup and Grouping

Your awesome text goes here

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

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 threshold option:

All the options

Please note: if the alwaysShow option is enabled, the threshold option is ignored.

Position

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

textareas

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

Bootstrap TouchSpin

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.

Using data attributes

Example with postfix (large)

With prefix

Init with empty value:

Value attribute is not set (applying settings.initval)

Value is set explicitly to 33 (skipping settings.initval)

Bootstrap-select

Create your <select> with the .selectpicker class.

It also works with option groups:

You can also show the tick icon on single select with the show-tick class:

And with multiple selects:

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.











Add an icon to an option or optgroup with the data-icon attribute:

You can add a search input by passing data-live-search="true" attribute:

You can also use the title attribute as an alternative to display when the option is selected:

Using the data-selected-text-format attribute on a multiple select you can specify how the selection is displayed.



Add the disabled attribute to the select to apply the disabled class.

Bootstrap FileStyle

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.

Default file input

File style without input

File style without icon

File style with custom text

File style with button style

Small file style

File style with custom icon

Disable file style

File style before button

File style placeholder