Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image
Basic Form Inputs

Lorem Ipsum is simply dummy text of the printing

Switches
Add class of .form-control with <input> tag

Single Switche

Multiple Switches

Enable Disable Switches

Color Switches

Switch Sizes

Radio
Add class of .form-control with <input> tag

Radio Fill Button

Radio outline Button

Radio Button

Color Radio Button

Color Radio material Button

Checkbox
Add class of .form-control with <input> tag

Border Checkbox

Fade-in Checkbox

Color Checkbox

zoom Checkbox

Tags Input
Add class of .form-control with <input> tag

Markup

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

Colors

You can set a fixed css class for your tags, or determine dynamically by providing a custom function.

Max-Tags

Just add "tags_max" to your input field to automatically change it to a tags input field.

Max-Characters

Just add "tags_max_char" to your input field to automatically change it to a tags input field.

Multiple

Just add "tags_add_multiple" to your input field to automatically change it to a tags input field.

Max Length
Add class of .form-control with <input> tag

Default

The badge will show up by default when the remaining chars are 10 or less:

Threshold

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:

Color-lables

Just add color-classwith input

Play With Positions

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

Also Working With Textarea

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