Material Admin Extended Dark

## Form Components

## Input Groups

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

    <!-- On Left -->
    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Full Name">
            <i class="form-group__bar"></i>
        </div>
    </div>

    <!-- On Right -->
    <div class="input-group">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Landscape">
            <i class="form-group__bar"></i>
        </div>
        <span class="input-group-addon"><i class="zmdi zmdi-landscape"></i></span>
    </div>

    <!-- On both sides -->
    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-arrow-missed"></i></span>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Internet">
            <i class="form-group__bar"></i>
        </div>
        <span class="input-group-addon"><i class="zmdi zmdi-globe"></i></span>
    </div>

#### Floating Labels

Basic example for input groups with floating labels.

    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
        <div class="form-group form-group--float">
            <input type="text" class="form-control">
            <label>Full Name</label>
            <i class="form-group__bar"></i>
        </div>
    </div>

#### Sizing

You may use the extra sizing classes to change size of the fields and icons.

    <!-- Large -->
    <div class="input-group input-group-lg">
        <span class="input-group-addon"><i class="zmdi zmdi-sun"></i></span>
        <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="Weather">
            <i class="form-group__bar"></i>
        </div>
    </div>

    <!-- Default -->
    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-sun"></i></span>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Weather">
            <i class="form-group__bar"></i>
        </div>
    </div>

    <!-- Small -->
    <div class="input-group input-group-sm">
        <span class="input-group-addon"><i class="zmdi zmdi-sun"></i></span>
        <div class="form-group">
            <input type="text" class="form-control input-sm" placeholder="Weather">
            <i class="form-group__bar"></i>
        </div>
    </div>

Source files:

- LESS: `/less/inc/form/form-group.less`
- HTML: `/form-components.html`

## Input Mask

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

Official site and detailed documentation: https://igorescobar.github.io/jQuery-Mask-Plugin/

In order to use this component, make sure to include it's javascript asset file.

    <script src="vendors/bower_components/jquery-mask-plugin/dist/jquery.mask.min.js"></script>

    <!-- Date -->
    <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="eg: 23/05/2014">

    <!-- Time -->
    <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="eg: 23:06:55">

    <!-- Date Time -->
    <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="eg: 00/00/0000 00:00:00">

    <!-- CEP -->
    <input type="text" class="form-control input-mask" data-mask="000-00-0000000" placeholder="eg: 000-00-0000000">

    <!-- Phone with Odd -->
    <input type="text" class="form-control input-mask" data-mask="(00) 0000-0000" placeholder="eg: (00) 0000-0000">

    <!-- US Phone Number -->
    <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="eg: (000) 000-0000">

    <!-- CPF -->
    <input type="text" class="form-control input-mask" data-mask="000.000.000-00" placeholder="eg: 000.000.000-00">

    <!-- Money -->
    <input type="text" class="form-control input-mask" data-mask="000.000.000.000.000,00" placeholder="eg: 000.000.000.000.000,00">

    <!-- IP Address -->
    <input type="text" class="form-control input-mask" data-mask="000.000.000.000" placeholder="eg: 000.000.000.000">

    <!-- Percentage -->
    <input type="text" class="form-control input-mask" data-mask="00000,00%" placeholder="eg: 00000,00%">

    <!-- Credit Card -->
    <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="eg: 0000 0000 0000 0000">

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.input-mask').mask();

Source files:

- Plugin:
  - JS: `vendors/bower_components/jquery-mask-plugin/dist/jquery.mask.min.js`
  - CSS: `none`
- HTML: `/form-components.html`

## Select 2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Official website and detailed documentation: https://select2.github.io/

In order to use this component, make sure to include it's javascript asset file.

    <!-- CSS -->
    <script src="vendors/bower_components/select2/dist/js/select2.full.min.js"></script>

    <!-- JS -->
    <link href="vendors/bower_components/select2/dist/css/select2.min.css" rel="stylesheet">

    <!-- Basic Example -->
    <select class="select2">
       <option>Subaru</option>
       <option>Mitsubishi</option>
       <option>Scion</option>
    </select>

    <!-- Placeholder Text -->
    <select class="select2" data-placeholder="Select a brand">
       ...
    </select>

    <!-- Disabled Select -->
    <select class="select2" data-placeholder="This one is disabled" disabled>
       ...
    </select>

    <!-- Hide Search Box -->
    <select class="select2" data-minimum-results-for-search="Infinity">
       ...
    </select>

    <!-- Multiple -->
    <select class="select2" multiple data-placeholder="Select one or more choices">
       ...
    </select>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('select.select2').select2({
        dropdownAutoWidth: true,
        width: '100%'
    });

Source files:

- Plugin:
  - CSS: `/vendors/bower_components/select2/dist/css/select2.min.css`
  - JS: `/vendors/bower_components/select2/dist/js/select2.full.min.js`
- LESS: `/less/inc/vendor-overrides/select2.less`
- HTML: `/form-components.html`

## Toggle Switch

CSS only Checkbox based toggle Switches.

    <!-- Default (inactive) -->
    <div class="form-group">
        <div class="toggle-switch">
            <input type="checkbox" class="toggle-switch__checkbox">
            <i class="toggle-switch__helper"></i>
        </div>
    </div>

    <!-- Active -->
    <div class="form-group">
        <div class="toggle-switch">
            <input type="checkbox" class="toggle-switch__checkbox" checked>
            <i class="toggle-switch__helper"></i>
        </div>
    </div>

    <!-- Disabled -->
    <div class="form-group">
        <div class="toggle-switch">
            <input type="checkbox" class="toggle-switch__checkbox" disabled>
            <i class="toggle-switch__helper"></i>
        </div>
    </div>

Source files:

- LESS: `/less/inc/form/switch.less`
- HTML: `/form-components.html`

## noUiSlider - 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, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

Official site and detailed documentation: http://refreshless.com/nouislider/

In order to use noUiSlider, you must include it's JavaScript and CSS asset files on your website.

    <!-- CSS -->
    <link rel="stylesheet" href="vendors/bower_components/nouislider/distribute/nouislider.min.css">

    <!-- JS -->
    <script src="vendors/bower_components/nouislider/distribute/nouislider.min.js"></script>

#### Basic Example

    <div id="slider-basic"></div>

    var sliderBasic = document.getElementById('slider-basic');

    noUiSlider.create(sliderBasic, {
    	start: 100,
        range: {
            'min': 0,
            'max': 1000
        }
    });

#### Range Slider

    <div id="slider-range"></div>

    var sliderRange = document.getElementById('slider-range');

    noUiSlider.create(sliderRange, {
    	start: [20, 80],
    	connect: true,
    	range: {
        		'min': 0,
        		'max': 100
    	}
    });

#### Complete Slider with values and labels

    <div class="form-group form-group--range">
        <label>Price Range</label>
        <div class="input-slider-values clearfix">
            <div class="pull-left"><span>$</span><span id="slider-complete-upper"></span></div>
            <div class="pull-right"><span>$</span><span id="slider-complete-lower"></span></div>
        </div>
        <div id="slider-complete"></div>
    </div>

    var sliderComplete = document.getElementById('slider-complete');
    var sliderCompleteValues = [
        document.getElementById('slider-complete-upper'),
        document.getElementById('slider-complete-lower')
    ]

    noUiSlider.create (sliderComplete, {
        start: [12000, 70000],
        connect: true,
        range: {
            'min': 12000,
            'max': 70000
        }
    });

    sliderComplete.noUiSlider.on('update', function( values, handle ) {
        sliderCompleteValues[handle].innerHTML = values[handle];
    });

Source files:

- Plugin
  - CSS: `vendors/bower_components/nouislider/distribute/nouislider.min.css`
  - JS: `vendors/bower_components/nouislider/distribute/nouislider.min.js`
- LESS: `/less/inc/vendor-overrides/noUiSlider.less`
- Demo JS: `/demo/js/misc.js`
- HTML: `/form-components.html`

## Date Time Picker

Date/time picker widget based on twitter bootstrap

Official website and detailed documentation: http://eonasdan.github.io/bootstrap-datetimepicker/

In order to use this plugin, you must include it's JavaScript and CSS asset files on your website.

    <!-- CSS -->
    <link href="vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <!-- JS -->
    <script src="vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

#### Basic example: Date and time picker

    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
            <div class="form-group">
            <input type='text' class="form-control date-time-picker" placeholder="Click here...">
            <i class="form-group__bar"></i>
        </div>
    </div>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.date-time-picker').datetimepicker({
       icons: { //Use custom Material Design Icons
           time: 'zmdi zmdi-time',
           date: 'zmdi zmdi-calendar',
           up: 'zmdi zmdi-chevron-up',
           down: 'zmdi zmdi-chevron-down',
           previous: 'zmdi zmdi-chevron-left',
           next: 'zmdi zmdi-chevron-right',
           today: 'zmdi zmdi-screenshot',
           clear: 'zmdi zmdi-trash',
           close: 'zmdi zmdi-times'
       }
    });

#### Date only picker

    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
            <div class="form-group">
            <input type='text' class="form-control date-picker" placeholder="Click here...">
            <i class="form-group__bar"></i>
        </div>
    </div>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.date-picker').datetimepicker({
        format: 'DD/MM/YYYY',
        icons: {
            time: 'zmdi zmdi-time',
            date: 'zmdi zmdi-calendar',
            up: 'zmdi zmdi-chevron-up',
            down: 'zmdi zmdi-chevron-down',
            previous: 'zmdi zmdi-chevron-left',
            next: 'zmdi zmdi-chevron-right',
            today: 'zmdi zmdi-screenshot',
            clear: 'zmdi zmdi-trash',
            close: 'zmdi zmdi-times'
        }
    });

#### Time only picker

    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-time"></i></span>
            <div class="form-group">
            <input type='text' class="form-control time-picker" placeholder="Click here...">
            <i class="form-group__bar"></i>
        </div>
    </div>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.time-picker').datetimepicker({
        format: 'LT',
        icons: {
            time: 'zmdi zmdi-time',
            date: 'zmdi zmdi-calendar',
            up: 'zmdi zmdi-chevron-up',
            down: 'zmdi zmdi-chevron-down',
            previous: 'zmdi zmdi-chevron-left',
            next: 'zmdi zmdi-chevron-right',
            today: 'zmdi zmdi-screenshot',
            clear: 'zmdi zmdi-trash',
            close: 'zmdi zmdi-times'
        }
    });

Source files:

- Plugin:
  - CSS: `/vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css`
  - JS: `vendors/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js`
- LESS: `/less/inc/vendor-overrides/bootstrap-datetimepicker.less`
- JS(function): `/js/inc/functions.js`
- HTML: `/form-components.html`

## Farbtastic - Color Picker

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected.

Official website and detaile documentation: https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

In order to use this component, make sure to include it's javascript asset file.

    <!-- CSS -->
    <link href="vendors/farbtastic/farbtastic.css" rel="stylesheet">

    <!-- JS -->
    <script src="vendors/farbtastic/farbtastic.min.js"></script>

    <div class="input-group">
        <span class="input-group-addon"><i class="zmdi zmdi-invert-colors"></i></span>
        <div class="form-group dropdown">
            <input type="text" class="form-control color-picker__value" value="#03A9F4" data-toggle="dropdown">
            <i class="form-group__bar"></i>

            <div class="color-picker__value"></div>
            <div class="dropdown-menu">
                <div class="color-picker__target"></div>
            </div>
        </div>
    </div>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.color-picker').each(function(){
        var colorOutput = $(this).find('.color-picker__value');
        var colorPickerTarget = $(this).find('.color-picker__target');

        colorPickerTarget.farbtastic(colorOutput);
    });

Source files:

- Plugin:
  - CSS: `/vendors/farbtastic/farbtastic.css`
  - JS: `/vendors/farbtastic/farbtastic.min.js`
- LESS: `/less/inc/vendor-overrides/farbtastic.less`
- JS(function): `/js/inc/functions.js`
- HTML: `/form-components.html`

## Simple File Input

This file input plugin allows you to create a visually appealing file or image input widgets.

Official website and detailed documentation: http://www.jasny.net/bootstrap/javascript/#fileinput

In order to use this plugin, you must include it's JavaScript asset files on your website. Please note that there is no need for any extra CSS or JS function code to initiate this plugin. You just need only to include the main javascript asset file.

    <script src="vendors/fileinput/fileinput.min.js"></script>

#### Basic example

    <div class="fileinput fileinput-new" data-provides="fileinput">
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select file</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="...">
        </span>
        <span class="fileinput-filename"></span>
        <a href="#" class="fileinput__close fileinput-exists" data-dismiss="fileinput">
            <i class="zmdi zmdi-close-circle"></i>
        </a>
    </div>

#### Image upload

    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div class="fileinput-preview" data-trigger="fileinput"></div>

        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
        <span class="btn btn-default btn-file">
            <span class="fileinput-new">Select image</span>
            <span class="fileinput-exists">Change</span>
            <input type="file" name="...">
        </span>
    </div>

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

Source files:

- Plugin:
  - JS: `/vendors/fileinput/fileinput.min.js`
  - CSS: `none`
- LESS: `/less/inc/vendor-overrides/fileinput.less`
- HTML: `/form-components.html`