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

Advance Form Elements

  2. Form
  3. Advance Form Elements
Raised Button
Basic
Diffrent Sizes
Action
Checkboxes
Border Checkbox
Primary
Warning
Success
Info
Danger
Disabled
Fade-In Checkbox
Color Checkbox
Radio-Buttons
Default
Filled
Radio Inline
Filled Inline
Select 2
Multi Select
Single Select
With Placeholder
Limiting the number of selections
Tagging Support
Automatic Tokenization
RTL Support
Diacritics support
Responsive Width
Loading Array Data
Loading Remote Data ( Ajax )
Disabled Results
Hiding the search box
Theme support
Theme support
MaxLength
Default

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

Thresold

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

Color-Labels

Do you want the badge with colors? Use the warningClass and limitReachedClass option

Play With Positions

Do you want change the position of badges? Use the placementoption with diffrent-values

Also Working With Textarea

Bootstrap maxlength supports textarea as well as inputs

Multi Select
Single

The following example shows the default behavior when the multiple attribute is omitted

Multiple

If multiple options are selected in advance and the select lacks the multiple attribute, the last option marked as selected will initially be selected by the plugin

All Group Option Select

The following example shows the default behavior when the multiple attribute is omitted

Collapse Group

The following example shows disable option,add disabled keyword to that option

Disable Option

The following example shows disable option,add disabled keyword to that option

Multiple Group Select

The plugin naturally supports optgroups, however the group headers are not clickable by default. See the enableClickableOptGroups option for details.

Pre-selected options
  • elem 2
  • elem 3
  • elem 4
  • elem 5
  • elem 1
Custom headers and footers
Selectable items
  • elem 1
  • elem 2
  • elem 3
  • elem 4
  • elem 5
  • elem 6
  • elem 7
  • elem 8
  • elem 9
  • elem 10
Selectable footer
Selection items
Selection footer
Optgroup
    • Friends
    • Yoda
    • Enemies
    • Palpatine
    • Darth Vader
    • Friends
    • Obiwan
Searchable
  • elem 2
  • elem 3
  • elem 5
  • elem 6
  • elem 7
  • elem 8
  • elem 9
  • elem 10
  • elem 11
  • elem 12
  • elem 13
  • elem 14
  • elem 15
  • elem 16
  • elem 1
  • elem 4
Public methods
  • elem 1
  • elem 2
  • elem 3
  • elem 4
  • elem 5
  • elem 6
  • elem 7
  • elem 8
  • elem 9
  • elem 10
Tags
Markup

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

Amsterdam Washington Sydney
Colors

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

Amsterdam Washington Sydney
Max-Characters

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

Multiple

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.

Amsterdam Washington Sydney Beijing Cairo
Max-Tags

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

Date-Time Widgets
Date Picker
Time Picker
Date & Time Picker
Min Date Set
Min Date Set
Date Time Range Picker
bootstrap-date time picker
Date Time Picker
Using Locales
Time Picker
No Icon (input field only)
Enabled/Disabled Dates
Custom Icons
Linked Pickers
Min View Mode
Disabled Days of the Week
View Mode
Birthday Calender
Date Range Picker
Date Range Picker Blank input
Multiple Option
  February 13, 2025 - March 14, 2025
Date Time Picker
Date Time Picker
to
Date Picker with Today
Multi Select Dates
Color picker
Basic
▼

Flat mode
cancel
Flat mode with clear
cancel
No Icon (input field only)
Large dark picker:
cancel