Form Advanced

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
Multiple Select
Limiting the number of selections

Input Masks

Use the button classes on an <a>, <button>, or <input> element.

e.g "DD/MM/YYYY"
e.g "HH:MM:SS"
e.g "DD/MM/YYYY HH:MM:SS"
e.g "xxxxx-xxx"
e.g "x-xx-xx-xx"
e.g "Your money"
e.g "#.##0,00"
e.g "xxxx-xxxx"
e.g "(xx) xxxx-xxxx"
e.g "(xxx) xxx-xxxx"
e.g "(xx) xxxxx-xxxx"
e.g "xxx.xxx.xxxx-xx"
e.g "xx.xxx.xxx/xxxx-xx"
e.g "xxx.xxx.xxx.xxx"

Bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

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

Settings
user-img
Nik G. Patel

Admin Head

Notifications

Do you need them?

API Access

Enable/Disable access

Auto Updates

Keep up to date

Online Status

Show your status to all

Recent

Tomaslau

I've finished it! See you so...

Stillnotdavid

This theme is awesome!

Kurafire

Nice to meet you

Shahedk

Hey! there I'm available...

Adhamdannaway

This theme is awesome!


Favorite 18

Kennith

I've finished it! See you so...

Stillnotdavid

This theme is awesome!

Kimberling

Nice to meet you

Kurafire

Hey! there I'm available...

Leonareade

This theme is awesome!