Inputs
Input types

Material design inputs will have the theme color as a border on focus. Change theme color in settings to see the effect.

Input sizes

Add class input-sm or input-lg to the input element

Icon Prefixes

The icon will get the theme color on input focus. Once a field is filled in the icon will keep the theme color.

Icon Prefix sizes

Add class small or large to the icon element.

Addons

Extend inputs by adding text or controls before, after, or on both sides of any text-based input. Use class input-group with an input-group-addon to prepend or append elements to a single input.

Inline text

Place text within an input-group-addon.

@example.com
Checkboxes and radio addons

Place any checkbox or radio option within an input-group-addon.

Use class no-border on the addon if you dont want a border underneath the addon.

Button addon

For buttons use class input-group-btn to wrap the buttons.

Button dropdown addon
Validation state

To see a working example of validation inputs click here

Validation state with icon

When using a validate icon, add class has-feedback to the input wrapper for proper padding.

Input with help text
A block of help text.
A block of help text on success.
A block of help text on warning.
A block of help text on error.
Input mask

A jQuery Plugin to make masks on form fields and html elements.

To use Mask, you will have to manually link to the mask.js file.

For all the options see the documentation

Textarea
Auto Resize Textarea
With icon prefix
Character Counter
Counter with input

Add the data-length=" " attribute to the input with the number of characters that are aloud to type by the user.
In this example data-length is set to 12.

Counter with textarea

Add the data-length=" " attribute to the textarea element.
In this example data-length is set to 40.

Tags input

To use tagsinput, you will have to manually link the tagsinput.css and tagsinput.js files.

Use attribute data-role ="tagsinput" on the input element.
Tags will have the theme color.

Works with typeahead.js. For all options see the documentation.

Color Picker
Basic

To use Spectrum, you will have to manually link the spectrum.css and spectrum.js files.

For all options see the documentation

Selection palette

keep track of what has been selected by the user with the showSelectionPalette option.
If the localStorageKey option is defined, the selection will be saved in the browser's localStorage object

Palette only

Show a specified palette only.

Palette toggle

The user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.

Full example
Date / time Picker
Date Picker

To use the Date-picker, you will have to manually link the date-picker.css, picker.js and picker.date.js files.
For all options see the documentation

Clock Picker

To use clockPicker, you will have to manually link the clockpicker.css and clockpicker.js files.

For all options see the documentation

Select

Bootstrap-select is the templates default selectpicker. No need to add css or js files, Just add class selectpicker to the select.
For all options see the documentation.

Basic single select

Add the class selectpicker to the select to initialize.

Theme Color

Give the dropdown menu the theme color by adding the class select-theme.

Search input

To add a search input to the select dropdown use the attribute data-live-search="true"data-live-search

Multiple select

Add multiple To allow multiple selections.

Option groups
Action box

Use data-actions-box="true" To add the options to select or deslect all options.

Max options

You can limit the number of options the user is allowed to select by setting the data-max-options=" " attribute.
e.g. data-max-options="2"

Selection count

If one item is selected, then the value is shown. If multiple are selected then the number of selected items is displayed by using:
data-selected-text-format="count".

Validate

To validate the select add class select-validate.
jQuery-validate is used to validate form fields.

Width

By default the select has a width of 220px.
You can set the width by using the data-width=" " attribute. Options are auto, px or %.

data-width="auto"

Width of the select adjusts to its widest option.

data-width="150px"

Give it a fixed with by using px.

data-width="100%"

Full width to its parent element.

Typeahead
Typeahead

To use Typeahead, you will have to manually link the typeahead.js file.

For all options see the documentation

Checkboxes

Easy to use, css only checkboxes that come in two different styles.

Types & States
Checkmark Type

Filled Type

Colors

Add one of the following classes to the input element:
theme, info, warning or error.

Radio
States

Colors

Add one of the following option as a class:
theme, info, warning or danger.

Range slider

noUiSlider plugin

Lightweight JavaScript range slider with full touch support.

noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the behaviour option.
This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none".

To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files.
For all option see the noUislider documentation

Types

For the default slider you dont have to add a class. To use the other types, add class slider-scale, slider-shadow or slider-balloon.

Colors

Click on one of the colors and see the class you have to add. For the default color you dont have to add a class.

Handles

The number of handles can be set using the start option. This option accepts an array of initial handle positions. Set one value for one handle, two values for two handles.
The 2 handles can be connected by setting the connect option to "true", and the behaviour option to "drag" or "drag-fixed"

Handles connected
Handles fixed connected
Slider values

Display the values of the slider.

Stepping

The amount the slider changes on movement can be set using the step option. In this example the behaviour option is set to "snap".

Slider with pips
File upload
File input

You can use the multiple attribute to allow multiple file uploads.

File
Dropzone

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

To use Dropzone, you will have to manually link the dropzone.css and dropzone.js files.

For all the options see the documentation

jQuery Knob

To use jQuery Knob, you will have to manually link the jquery.knob.js file.
For all options see the documentation

Default
Readonly
Half
Thickness

© 2016 YourApp