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.
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.
Date Picker
The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. Click elsewhere on the page or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.