Material Admin Extended Dark

## Form Groups and Elements

## Form Groups

Form Group is used to wrap input elements such as input texts, textareas and selects in order to add extra styling. Form Group can be also used with third party form components such as select2, noUislider or any other form related elements.

Basic Example:

    <div class="form-group">
        <input type="text" class="form-control">
        <i class="form-group__bar">
    </div>

#### Form Group modifier classes.

You can use the following form group modifier classes for each given cases.

1. `.form-group--float`: Floating label on focus for input text and textarea fields.

       <div class="form-group form-group--float">
           <input type="text" class="form-control" placeholder="Name">

           <label>Name</label>

           <i class="form-group__bar"></i>
       </div>

2. `.form-group--centered`: Center aligned texts.

       <div class="form-group form-group--centered">
           ...
       </div>

3. `.form-group--active`: Shows white bar beneath the text field.

       <div class="form-group form-group--active">
           ...
       </div>

4. `.form-group--light`: Used for darker backgrounds.

       <div class="form-group form-group--light">
           ...
       </div>

5. `.form-group--select`: Used for selects.

       <div class="form-group form-group--range">
           ...
       </div>

## Input Text

Text Inputs with different sizes by height.

    <div class="form-group">
        <input type="text" class="form-control input-sm" placeholder="Input Small">
        <i class="form-group__bar"></i>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Input Default">
        <i class="form-group__bar"></i>
    </div>

    <div class="form-group">
        <input type="text" class="form-control input-lg" placeholder="Input Large">
        <i class="form-group__bar"></i>
    </div>

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

    <div class="row">
      <div class="col-xs-2">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="col-xs-2">
            <i class="form-group__bar"></i>
        </div>
      </div>

      <div class="col-xs-3">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="col-xs-3">
            <i class="form-group__bar"></i>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="col-xs-4">
            <i class="form-group__bar"></i>
        </div>
      </div>
    </div>

## Textarea

Form control which supports multiple lines of text. Change 'rows' attribute as necessary.

    <div class="form-group">
        <textarea class="form-control" rows="5" placeholder="Let us type some lorem ipsum...."></textarea>
        <i class="form-group__bar"></i>
    </div>

#### Auto Height Textarea

Auto height growing textarea is made possible using the awesome plugin http://www.jacklmoore.com/autosize/. Make sure to include autosize javascript library as mentioned below before using this plugin on any textarea elements.

    // Auto Size Library
    <script src="vendors/bower_components/autosize/dist/autosize.min.js"></script>

    // Site Functions & Actions
    <script src="js/app.min.js"></script>

    <div class="form-group">
        <textarea class="form-control textarea-autosize" placeholder="Start pressing Enter to see growing..."></textarea>
        <i class="form-group__bar"></i>
    </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.

    autosize($('.textarea-autosize'));

## Selects

Use the default option, or add multiple to show multiple options at once.

    <div class="form-group form-group--select">
        <select class="form-control">
            <option>Select an Option</option>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
        </select>
    </div>

## Checkboxes and Radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

    <!-- Checkboxes -->

    <!-- Default -->
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">
            <i class="input-helper"></i>
            Option one is this and that-be sure to include why it's great
        </label>
    </div>

    <!-- Disabled -->
    <div class="checkbox disabled">
        <label>
            <input type="checkbox" value="" disabled="">
            <i class="input-helper"></i>
            Option two is disabled
        </label>
    </div>

    <!-- Radio -->

    <!-- Default -->
    <div class="radio">
        <label>
            <input type="radio" name="sample" value="">
            <i class="input-helper"></i>
            Option one is this and that-be sure to include why it's great
        </label>
    </div>

    <!-- Disabled -->
    <div class="radio">
        <label>
            <input type="radio" name="sample" value="">
            <i class="input-helper"></i>
            Option two can be something else and selecting it will deselect option one
        </label>
    </div>

Inline Checkboxes and Radios.

    <!-- checkboxes -->
    <label class="checkbox-inline">
        <input type="checkbox" value="option1">
        <i class="input-helper"></i>
        1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="option2">
        <i class="input-helper"></i>
        2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="option3">
        <i class="input-helper"></i>
        3
    </label>

    <!-- Radios -->
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" value="option1">
        <i class="input-helper"></i>
        1
    </label>

    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" value="option2">
        <i class="input-helper"></i>
        2
    </label>

    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" value="option3">
        <i class="input-helper"></i>
        3
    </label>