Material Admin

Jonathan Morris
Available
David Belle
Last seen 3 hours ago
Fredric Mitchell Jr.
Availble
Glenn Jecobs
Availble
Bill Phillips
Last seen 3 days ago
Wendy Mitchell
Last seen 2 minutes ago
Teena Bell Ann
Busy
Jonathan Morris
Available
Fredric Mitchell Jr.
Availble
Glenn Jecobs
Availble
Teena Bell Ann
Busy

## Form Components

## Input Groups Extend form controls by adding text or buttons before, after, or on both sides of any text-based inputs.

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.

Multiple Elements

You may add 2 or more possible input elements. Use grid classes to define the width of each elements.

Different Sizes

You may use the extra sizing classes to change size of the feilds.

## Input Mask An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc...

Date
Time
Date Time
CEP
Phone Number
Phone with Odd
US Phone Number
CPF
Money
IP Address
Percentage
Credit Card

## Custom Select A custom select for Bootstrap using it's Dropdown component

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 Desing look alike Toggle Switches based on Radio Box.

Basic Examples

Default and Disabled options
Toggle Swith Default
Toggle Swith Disabled

Optional Color schemes

Use the given data attribute to change the color scheme of the Toggle Switch
Toggle Swith Red
Toggle Swith Blue
Toggle Swith Green
Toggle Swith Cyan
Toggle Swith Lime
Toggle Swith Amber
Toggle Swith Purple
Toggle Swith Pink

## Input Slider noUiSlider is a range slider without bloat. It 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.

Basic Example

Range Slider

Output Value with tap and drag

Optional ColoR Schemes

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

## Date Time Picker Date/time picker widget based on twitter bootstrap

Basic Example

Date Picker

Time Picker

## Color Picker Simplt HEX and HSL color picker with customizable options

## HTML Editor Super Simple WYSIWYG Editor on Bootstrap

Basic Example

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,

## Simple File Input The file input plugin allows you to create a visually appealing file or image input widgets

Basic Example

Select file Change ×

Image Preview

Select image Change Remove

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.