1. YOU ARE HERE
  2. Form Elements

Form - Inputs & Controls

Inputs
Horizontal form
Label hint Some help text
.00
$ .00
Prepended and appended inputs
Default Form

You can select some type of a field just right in the place.

Anything can be appended to the right

With .bg-gray-lighter. White by default.

Form Options
Control sizing

Set input heights using classes like .form-control-lg and .form-control-sm. Also works with type="search" inputs and selects. For input groups use .input-group-lg & .input-group-sm.


Form Options
Input Groups

Different colors & sizes for any elements including input groups. Elements may be easily styled with classes like .bg-primary or .bg-transparent


Textareas
Small form
Selects
Default form with labels on left
Dropdown based colored selects
Auto size
Checkbox Controls
Basic

Supports bootstrap brand colors: .abc-checkbox-primary, .abc-checkbox-info etc. Pure css solution with no javascript. Let your checkboxes shine!

Circled

.abc-checkbox-circle for roundness. No more sad controls controls. Check out this brand-new square checkboxes!

Disabled

Disabled state also supported. Full stack checkbox functionality.

Built with awesome-bootstrap-checkbox.

Radio Controls
Basic

Supports bootstrap brand colors: .abc-radio-primary, .abc-radio-danger etc. Pure css solution with no javascript. Let your radios shine!

Disabled

Disabled state also supported. Full stack radios functionality.

Cool iOS-like switches

Simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps.

Pickers
Date & Time
Colors
Input Masks
Masked inputs
Sliders
Color Options

Sing extends Bootstrap Slider and provides different color options:

Slider Orientation

Vertical orientation is also possible. Simply changing data-slider-orientation attribute does the thing.

                   
Range Selector

Range selector, options specified via data-slider-value attribute as an array. Price range selector:

Simple file uploads

The man who is really serious, with the urge to find out what truth is, has no style at all. He lives only in what is.

Bruce Lee
Remove
Awesome file input plugin allows you to create a visually appealing file or image inputs.
...
Select imageChange Remove
Showing a thumbnail instead of the filename when uploading an image.
Drop Zone

Drop files here or click to upload.

(This is just a demo dropzone. Selected files are not actually uploaded.)