Form Components form components and widgets

Twitter Auto Complete(typeahead.js)

E.g: conquer, keenthemes.
Learn more: http://twitter.github.io/typeahead.js/

E.g: USA, Malaysia. Prefetch from JSON source

Uses a precompiled template to customize look of suggestion.

Two datasets that are prefetched, stored, and searched on the client. Highlighting is enabled.

View in Modal
Date Pickers
Select date
Select date
Select date
Select month only
to
Select date range
View Datepicker in modal
Datetime Pickers
View Datetimepicker in modal
Time Pickers
View Timepicker in modal
Clockface Time Pickers
View Clockface Time Pickers in modal
Daterangepickers
 
Color Pickers
View colorpicker in modal
Select 2 Dropdowns

Fixed Width

.input-xlarge
.input-large
.input-medium
.input-small
.input-xsmall

Fluid Width

.col-md-4
.col-md-5
.col-md-6
.col-md-9

Advance Samples

View Select2 in modal
Multiple Select
Bootstrap Switch
View in Modal
Bootstrap Input MaxLength
Maxlength is 25 chars. The badge will show up by default when the remaining chars are 10 or less.
Maxlength is 25 chars. Do you want the badge to show up when there are 20 chars or less? Use the threshold option: threshold: 20
This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the alwaysShow option is enabled, the threshold
Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right. All you need to do is specify the placement option, with one of those strings.
Spinners
basic example
disabled state
with max value: 10
with step: 5
Bootstrap TouchSpin
basic example
example with decimal steps
Form Tools
Incorrect please try again

Enter the words above Enter the numbers you hear

Note: Please visit http://www.google.com/recaptcha to learn more about the Google reCaptcha

Check
Type a username(E.g: user1, user2) and check its availability.
Type a username(E.g: user1, user2) and check its availability on focus lost
Type a password to check its strength
IP Address Input
192.168.120.150
3ffe:1900:4545:3:200:f8ff:fe21:67cf
Input Masks
y/m/d
change the placeholder
multi-char placeholder
(999) 999-9999
99-9999999
mask "9" or mask "99" or ... mask "9999999999"
123456 => € ___.__1.234,56
123456 => € ___.__1.234,56(left aligned)
999-99-9999. remove the empty mask on blur or when not empty removes the optional trailing part
Tags Input
Advanced File Input
 
Select file Change Remove
Select file Change  
Select image Change Remove
NOTE! Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
Select image Change Remove
NOTE! Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.
Bootstrap Markdown Editor

This is some editable heading

Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!

Click above content to edit it
Fixed widthe set with data-width="400" html attribute
WYSIWYG Editors
2013 © Conquer by keenthemes.