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. Remember to place <label>s outside the input group.


@

@example.com
https://example.com/users/

$
.00


Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize. No need for repeating the form control size classes on each element.


Small
Default
Large

Autosize 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

Start pressing the enter key to see the auto-height in action.

Input Masking

A plugin to make masks on form fields for better instant validations.

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.

File browser

Bootsrap provides a nicely customized simple UI for file inputs with localization support.

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

Button Checkboxes and Radios

Control button states or create groups of buttons for more components like toolbars.
Toggle states

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.





Checkbox and radio buttons

Bootstrap’s button styles 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 with contacts and related lists

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.


WYSIWYG Editor

Trumbowyg is Light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API.

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-fill attribute.

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