Form Components

Welcome to Notika Admin Template

Input Text

Text Inputs with different sizes by height and column.

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.

Floating Labels

Basic example for input groups with floating labels

Different Sizes

You may use the extra sizing classes (.input-sm, .input-lg ) to change size of the feilds.

Input Mask

An input mask helps the user with the input. This can be useful for dates, numerics, phone numbers etc...

ISBN 1

IPV4

Tax ID

Phone

Currency

Date

Postal Code

IP Address

Credit Card

Bootstrap Seelct - Custom Select

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.

Basic Example

Serach Option

Option Groups

Disabled Options

Multi Select

Limit Selection - Set to 2

Display Count

Chosen

Make long, unwieldy select boxes more user friendly.

Basic Example

Disabled Items

Multiple Example

Option Group

Toggle Switch

Material Design look alike Toggle Switches based on Radio Box.

Option Group

Optional Color schemes

Use the given data attribute to change the color scheme of the Toggle Switch

Input Slider

Range slider offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.

Vertical Range Slider

77
55
40
55
77
77
55
40
55
77

Date Picker

Date picker widget based on twitter bootstrap

Color Picker

Simplt HEX and HSL color picker with customizable options

HTML Editor

Super Simple WYSIWYG Editor on Bootstrap

Click to edit

You can edit content on the fly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula erat sit amet aliquam vehicula. Aliquam aliquet et risus et consequat. Quisque ultrices nulla eu magna vulputate, quis varius massa tempor. Suspendisse sed condimentum purus, eget consequat dolor. Fusce aliquet ultricies porta. Nunc semper commodo leo at maximus. Duis maximus maximus leo, id lobortis nisi aliquam sit amet. Nullam vel ex id augue scelerisque congue sit amet eget urna.

Air-mode

Air-mode gives clearer interface with hiddened toolbar. To reveal toolbar, select a text below where you want to shape up.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod quam vel lacinia facilisis. Sed condimentum nisi vel ante maximus, sit amet vestibulum leo euismod. Curabitur viverra faucibus nisi eu molestie. Donec convallis finibus felis porttitor tristique. Nulla pretium est et ante dignissim.

Drag and Drop File Uploader

DropzoneJS is an open source library that provides Drag and Drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

Drop files here or click to upload.

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