Form Components
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
Sizing
Add the relative form sizing classes to the .input-groupitself and contents within will automatically resize. No need for repeating the form control size classes on each element.
Auto-height Textarea
Adjust the height of textarea based on the content size.
Basic example
Start pressing the enter key to see the auto-height in action.
With default value
Input Masking
A jQuery Plugin to make masks on form fields and HTML elements.
Select 2
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Drag and drop file upload
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
Toggle Switch
Material design look alike Toggle Switches based on Radio Boxes
Basic Example
Active State
Disabled
Color variants
Optional color variants can be added using modifier classes
Date Time Picker
Flatpickr is a lightweight and powerful datetime picker.
Color Picker
Simple color picker based on jQuery and Bootstrap.
Input Sliders
noUiSlider is a lightweight JavaScript range slider with tons of customizaion.
Single slider
Range Slider
Color variants
Optional color variants can be added using modifier classes
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Toggle states
Add data-toggle="button"to toggle a button’s activestate. If you’re pre-toggling a button, you must manually add the .activeclass and aria-pressed="true"to the <button>.
Checkbox and radio buttons
Bootstrap’s .buttonstyles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling.
Custom Checkboxes
Custom rounded checkboxes with alphabet characters to use in contacts and related lists
WYSIWYG Editor
Trumbowyg is Light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API.
Icon Toggles (Checkbox)
Icon toggles are customized checkboxes to use with icon toggles. Icon toggles are much useful when you have icon toggle elements such as favourites, thumbs ups, thumbs downs etc.
Default stat
Click on the icons below to toggle the stat.
Active (checked) stat
Click on the icons below to toggle the stat.
Active Colors
You can set up to 5 active colors by using modifier classes
Ratings
RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.
Basic example
Basic RateYo examples with start width and rating values.
Sizing
Different sizes can be set using data attribute data-rateyo-star-width.
Rated fill color
The color for the rated part of a star. You can set this option using data-rateyo-rated-fillattribute.
Text Counter
jQuery plugin to count words or characters and enforce min/max requirements.
Basic example
Basic text counter with least options enabled
Maximum limit counter
Fires when a counter reaches the maximum word/character count.
Minimum counter
Fires when a counter reaches the minimum word/character count