Form Tools input spinner, switches, input masks and more

THEME COLORS

  • Default
  • Blue Hoki
  • Blue Steel
  • Orange
  • Yellow Crusta
  • Green Haze
  • Red Sunglo
  • Red Intense
  • Purple Plum
  • Purple Studio

LAYOUT

  • Layout
  • Top Menu Style
  • Top Menu Mode
  • Mega Menu Style
  • Mega Menu Mode
Twitter Auto Complete(typeahead.js)

E.g: metronic, 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
Form Tools

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
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 Switch
View in Modal
Bootstrap TouchSpin
basic example
example with decimal steps
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.
CKEditor Editor

About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore.

Subscribe Email

Follow Us On

Contacts

Phone: 800 123 3456
Email: info@metronic.com
2014 © Metronic. All Rights Reserved.