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