Ubld

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

##### Multiple Select

##### Limiting the number of selections

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

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

Vertical button alignment
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)
Button group

#### 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:

##### Few options

##### All the options

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

##### textareas

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

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

#### Chat

- Chadengle
- Tomaslau
- Stillnotdavid
- Kurafire
- Shahedk
- Adhamdannaway
- Ok
- Arashasghari
- Joshaustin
- Sortino