Advanced Form Elements

Knob input http://anthonyterrien.com/knob/

Knob - Dial

Easily create knob input style.

Simple knob example

Dynamic knob example

Chosen select http://harvesthq.github.io/chosen/

With chosen select uesr can fase chose from large in select input.

  • India
  • Peru
    Range Slider https://github.com/IonDen/ion.rangeSlider

    Sliders

    Are perfect for range select option.

    Example of: Set diapason from 0 to 5000, Adding postfix "+" to max value, Set slider type to double, Dollar symbol as prefix, Enable grid
    $0$5000+NaNNaNNaNNaNNaN
    Example of: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid
    10 carats0 caratsNaNNaNNaNNaNNaN
    Example of: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix
    -50°50°NaNNaNNaNNaNNaN
    Example of:Change common slider numbers to custom (Month names). Using values array for that. Array can be any length, Slider will change min and max number automaticaly to fit values array length, Step parameter also will be changed to one, to allow to choose items in values array
    DecemberJanuary
    TouchSpin http://www.virtuosoft.eu/code/bootstrap-touchspin/

    A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

    Basic example with empty value

    Example with postfix

    %

    Example with vertical button alignment:

    Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.

    Showing all 10
    Showing all 2
    Select2 https://select2.github.io/

    Select2 is a jQuery based replacement for select boxes. It can take a regular select box and turn it into:

    A placeholder value can be defined and will be displayed until a selection is made.

    Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

    Range Slider http://refreshless.com/nouislider/

    Range Slider

    Simple and clean range select slider.

    Basic example

    Range select example

    Data Picker https://github.com/eternicode/bootstrap-datepicker

    Data picker

    Simple and easy select a time for a text input using your mouse.

    to
    ClockPicker http://weareoutman.github.io/clockpicker/

    ClockPicker

    A clock-style timepicker for Bootstrap (or jQuery).

    Date Range Picker http://www.daterangepicker.com/

    Date Range Picker

    A JavaScript widget for choosing date ranges. Designed to work with the Bootstrap CSS framework.

    All options example

    May 8, 2025 - June 6, 2025
    Color picker http://mjolnic.github.io/bootstrap-colorpicker/

    Colorpicker

    Colorpicker plugin for the Twitter Bootstrap toolkit.

    As normal input
    As a link
    Change background color
    Bootstrap Tags Input

    jQuery plugin providing a Twitter Bootstrap user interface for managing tags

    Basic example with few initial tags

    Amsterdam Washington Sydney Beijing Cairo
    Input Mask http://jasny.github.io/bootstrap/

    Input Mask

    Input masks allows a user to more easily enter data where you would like them to enter the data in a certain format.

    999-99-999-9999-9
    999 99 999 9999 9
    999/99/999/9999/9
    192.168.100.200
    99-9999999
    (999) 999-9999
    $ 999,999,999.99
    dd/mm/yyyy
    Switcher http://abpetkov.github.io/switchery/

    Switcher

    Is iOS 7 style switches for your checkboxes.



    Custom switch

    Pure CSS3 On/Off flipswitches with animated transitions.

    Image cropper http://fengyuanchen.github.io/cropper/

    A simple jQuery image cropping plugin.

    Preview image

    Comon method

    You can upload new image to crop container and easy download new cropped image.

    Other method

    You may set cropper options with $(image}).cropper(options)

    Awesome bootstrap checkbox

    Basic

    Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

    Checkboxes without label text

    Inline checkboxes

    Circled

    .checkbox-circle for roundness.

    Radio

    Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

    Radios without label text

    Inline radios