Forms

Input form components.

First Name

Last Name

Password

Gender

Country

Disabled

JADE
HTML


form
  .row
    .col-md-6
      .row
        .col-md-12
          .eq-ui-form-group.eq-ui-input-field
            i.mdi.mdi-account-circle.icon.prefix
            input#first_name_pre.eq-ui-input(type='text')
            label(for='first_name_pre') First Name
    .col-md-6
      .row
        .col-md-12
          .eq-ui-form-group.eq-ui-input-field
            i.mdi.mdi-phone.icon.prefix
            input#icon_telephone.eq-ui-input(type='tel')
            label(for='icon_telephone') Telephone
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-field
        i.mdi.mdi-comment-text.icon.prefix
        textarea#icon_textarea.eq-ui-textarea(rows='1')
        label(for='icon_textarea') Textarea


<form>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <input id="first_name" type="text" class="eq-ui-input">
                        <label for="first_name">First Name</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <input id="last_name" type="text" class="eq-ui-input">
                        <label for="last_name">Last Name</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-field">
                <input id="password" type="password" class="eq-ui-input">
                <label for="password">Password</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <input id="email" type="email" class="eq-ui-input">
                        <label for="email" data-error="wrong" data-success="right">Email</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <select id="gender" class="eq-ui-select">
                            <option value="" disabled selected>Choose your gender</option>
                            <option value="1">Male</option>
                            <option value="2">Female</option>
                        </select>
                        <label>Gender</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <input placeholder="Placeholder" id="country" type="text" class="eq-ui-input">
                        <label for="country">Country</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <input id="disabled" type="text" value="I am not editable" class="eq-ui-input" disabled>
                        <label for="disabled">Disabled</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Add the class eq-ui-textarea in the textarea.

JADE
HTML


form
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-field
        textarea#textarea_field.eq-ui-textarea(rows='1')
        label(for='textarea_field') Textarea


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-field">
                <textarea id="textarea_field" rows='1' class="eq-ui-textarea"></textarea>
                <label for="textarea_field">Textarea</label>
            </div>
        </div>
    </div>
</form>

Add an icon with the class prefix before the input and label.

First Name

Telephone

Textarea

JADE
HTML


form
  .row
    .col-md-6
      .row
        .col-md-12
          .eq-ui-form-group.eq-ui-input-field
            i.mdi.mdi-account-circle.icon.prefix
            input#first_name_pre.eq-ui-input(type='text')
            label(for='first_name_pre') First Name
    .col-md-6
      .row
        .col-md-12
          .eq-ui-form-group.eq-ui-input-field
            i.mdi.mdi-phone.icon.prefix
            input#icon_telephone.eq-ui-input(type='tel')
            label(for='icon_telephone') Telephone
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-field
        i.mdi.mdi-comment-text.icon.prefix
        textarea#icon_textarea.eq-ui-textarea(rows='1')
        label(for='icon_textarea') Textarea


<form>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <i class="mdi mdi-account-circle icon prefix"></i>
                        <input id="first_name_pre" type="text" class="eq-ui-input">
                        <label for="first_name_pre">First Name</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="eq-ui-form-group eq-ui-input-field">
                        <i class="mdi mdi-phone icon prefix"></i>
                        <input id="icon_telephone" type="tel" class="eq-ui-input">
                        <label for="icon_telephone">Telephone</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-field">
                <i class="mdi mdi-comment-text icon prefix"></i>
                <textarea id="icon_textarea" rows='1' class="eq-ui-textarea"></textarea>
                <label for="icon_textarea">Textarea</label>
            </div>
        </div>
    </div>
</form>

You can add custom validation messages by adding either data-error or data-success attributes to your input field labels. For more info for validate, go to: Form Validation

JADE
HTML


form
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-field
        input#email_val.eq-ui-input.validate(type='email')
        label(for='email_val', data-error='wrong', data-success='right') Email


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-field">
                <input id="email_val" type="email" class="eq-ui-input validate">
                <label for="email_val" data-error="wrong" data-success="right">Email</label>
            </div>
        </div>
    </div>
</form>

JADE
HTML


.eq-ui-form-group.eq-ui-input-field
  select.eq-ui-select
    option(value='', disabled='', selected='') Choose your option
    option(value='1') Option 1
    option(value='2') Option 2
    option(value='3') Option 3
  label Normal Select


<div class="eq-ui-form-group eq-ui-input-field">
    <select class="eq-ui-select">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Normal Select</label>
</div>

JADE
HTML


.eq-ui-form-group.eq-ui-input-field
  select.eq-ui-select(multiple='')
    option(value='', disabled='', selected='') Choose your option
    option(value='1') Option 1
    option(value='2') Option 2
    option(value='3') Option 3
   label Multiple Select


<div class="eq-ui-form-group eq-ui-input-field">
    <select class="eq-ui-select" multiple>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Multiple Select</label>
</div>

JADE
HTML


 .eq-ui-form-group.eq-ui-browser-select-field
   span.eq-ui-caret
  select.eq-ui-browser-select
    option(value='', disabled='', selected='') Choose your option
    option(value='1') Option 1
    option(value='2') Option 2
    option(value='3') Option 3
  label Browser Select


<div class="eq-ui-form-group eq-ui-browser-select-field">
    <span class="eq-ui-caret"></span>
    <select class="eq-ui-browser-select">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Browser Select</label>
</div>

JADE
HTML


// Disabled Browser Select
select.eq-ui-browser-select(disabled='')


// Disabled Normal Select
select.eq-ui-select(disabled='')


<!-- Disabled Browser Select -->
<select class="eq-ui-browser-select" disabled>

<!-- Disabled Normal Select -->
<select class="eq-ui-select" disabled>

JADE
HTML


// Search
form
  .row
    .col-md-12
      .eq-ui-search
        input(type='text', placeholder='Search')
        i.eq-ui-search-icon-left.mdi.mdi-magnify.icon.icon-left
        i.eq-ui-search-clear.mdi.mdi-close.icon.icon-right.icon-18

// Search Expandable
form
  .row
    .col-md-12
      .eq-ui-search.eq-ui-search-expandable
        input(type='text', placeholder='Search')
        a.eq-ui-search-icon-left.eq-ui-serach-expandable-show.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi.mdi-magnify.icon
        i.eq-ui-search-clear.mdi.mdi-close.icon.icon-right.icon-18


<!-- Search -->
<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-search">
                <input type="text" placeholder="Search">
                <i class="eq-ui-search-icon-left mdi mdi-magnify icon icon-left"></i>
                <i class="eq-ui-search-clear mdi mdi-close icon icon-right icon-18"></i>
            </div>
        </div>
    </div>
</form>

<!-- Search Expandable -->
<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-search eq-ui-search-expandable">
                <input type="text" placeholder="Search">
                <a class="eq-ui-search-icon-left eq-ui-serach-expandable-show btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi mdi-magnify icon"></i>
                </a>
                <i class="eq-ui-search-clear mdi mdi-close icon icon-right icon-18"></i>
            </div>
        </div>
    </div>
</form>

JADE
HTML


form
  .row
    .col-md-12
      .eq-ui-form-group
        input#test1.eq-ui-input(name='group1', type='radio')
        label(for='test1') Red
      .eq-ui-form-group
        input#test2.eq-ui-input(name='group1', type='radio')
        label(for='test2') Yellow
      .eq-ui-form-group
        input#test3.eq-ui-input.with-gap(name='group1', type='radio')
        label(for='test3') Green
      .eq-ui-form-group
        input#test4.eq-ui-input(name='group1', type='radio', disabled='disabled')
        label(for='test4') Brown


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group">
                <input name="group1" type="radio" id="test1" class="eq-ui-input" />
                <label for="test1">Red</label>
            </div>
            <div class="eq-ui-form-group">
                <input name="group1" type="radio" id="test2" class="eq-ui-input" />
                <label for="test2">Yellow</label>
            </div>
            <div class="eq-ui-form-group">
                <input name="group1" type="radio" id="test3" class="eq-ui-input with-gap" />
                <label for="test3">Green</label>
            </div>
            <div class="eq-ui-form-group">
                <input name="group1" type="radio" id="test4" class="eq-ui-input" disabled="disabled" />
                <label for="test4">Brown</label>
            </div>
        </div>
    </div>
</form>

JADE
HTML


form
  .row
    .col-md-12
      .eq-ui-form-group
        input#test5.eq-ui-input(type='checkbox')
        label(for='test5') Red
      .eq-ui-form-group
        input#test6.eq-ui-input(type='checkbox', checked='checked')
        label(for='test6') Yellow
      .eq-ui-form-group
        input#test7.eq-ui-input.filled-in(type='checkbox', checked='checked')
        label(for='test7') Filled in
      .eq-ui-form-group
        input#test8.eq-ui-input.indeterminate-checkbox(type='checkbox')
        label(for='test8') Indeterminate Style
      .eq-ui-form-group
        input#test9.eq-ui-input(type='checkbox', checked='checked', disabled='disabled')
        label(for='test9') Green
      .eq-ui-form-group
        input#test10.eq-ui-input(type='checkbox', disabled='disabled')
        label(for='test10') Brown


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test5" class="eq-ui-input" />
                <label for="test5">Red</label>
            </div>
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test6" class="eq-ui-input" checked="checked" />
                <label for="test6">Yellow</label>
            </div>
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test7" class="eq-ui-input filled-in" checked="checked" />
                <label for="test7">Filled in</label>
            </div>
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test8" class="eq-ui-input indeterminate-checkbox" />
                <label for="test8">Indeterminate Style</label>
            </div>
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test9" class="eq-ui-input" checked="checked" disabled="disabled" />
                <label for="test9">Green</label>
            </div>
            <div class="eq-ui-form-group">
                <input type="checkbox" id="test10" class="eq-ui-input" disabled="disabled" />
                <label for="test10">Brown</label>
            </div>
        </div>
    </div>
</form>

Off On

JADE
HTML


form
  .row
    .col-md-12
      .eq-ui-form-group
        // Switch
        .eq-ui-switch
          label
            | Off
            input(type='checkbox')
            span.lever
            | On
      .eq-ui-form-group
        // Disabled Switch
        .eq-ui-switch
          label
            | Off
            input(disabled='', type='checkbox')
            span.lever
            | On


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group">
                <!-- Switch -->
                <div class="eq-ui-switch">
                    <label>
                        Off
                        <input type="checkbox">
                        <span class="lever"></span>
                        On
                    </label>
                </div>
            </div>
            <div class="eq-ui-form-group">
                <!-- Disabled Switch -->
                <div class="eq-ui-switch">
                    <label>
                        Off
                        <input disabled type="checkbox">
                        <span class="lever"></span>
                        On
                    </label>
                </div>
            </div>
        </div>
    </div>
</form>

Based in jQuery-Autocomplete plugin. For more info and view the documentation, go to: jquery-autocomplete

Sample autocomplete

JADE
HTML


// Search
form.doc-form
  .row
    .col-md-12
      #doc-eq-ui-search-autocomplete.eq-ui-search
        input(type='text', placeholder='Search')
        i.eq-ui-search-icon-left.mdi.mdi-magnify.icon.icon-left
        i.eq-ui-search-clear.mdi.mdi-close.icon.icon-right.icon-18

// Search expandable
form.doc-form
  .row
    .col-md-12
      #doc-eq-ui-search-expandable-autocomplete.eq-ui-search.eq-ui-search-expandable.left
        input(type='text', placeholder='Search')
        a.eq-ui-search-icon-left.eq-ui-serach-expandable-show.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi.mdi-magnify.icon
        i.eq-ui-search-clear.mdi.mdi-close.icon.icon-right.icon-18

// Input
form.doc-form
  .row
    .col-md-12
      #doc-text-autocomplete.eq-ui-form-group.eq-ui-input-field
        input#text-autocomplete.eq-ui-input(type='text')
        label(for='text-autocomplete') Text autocomplete


<!-- Search -->
<form class="doc-form">
    <div class="row">
        <div class="col-md-12">
            <div id="doc-eq-ui-search-autocomplete" class="eq-ui-search">
                <input type="text" placeholder="Search">
                <i class="eq-ui-search-icon-left mdi mdi-magnify icon icon-left"></i>
                <i class="eq-ui-search-clear mdi mdi-close icon icon-right icon-18"></i>
            </div>
        </div>
    </div>
</form>

<!-- Search expandable -->
<form class="doc-form">
    <div class="row">
        <div class="col-md-12">
            <div id="doc-eq-ui-search-expandable-autocomplete" class="eq-ui-search eq-ui-search-expandable left">
                <input type="text" placeholder="Search">
                <a class="eq-ui-search-icon-left eq-ui-serach-expandable-show btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi mdi-magnify icon"></i>
                </a>
                <i class="eq-ui-search-clear mdi mdi-close icon icon-right icon-18"></i>
            </div>
        </div>
    </div>
</form>

<!-- Input -->
<form class="doc-form">
    <div class="row">
        <div class="col-md-12">
            <div id="doc-text-autocomplete" class="eq-ui-form-group eq-ui-input-field">
                <input id="text-autocomplete" type="text" class="eq-ui-input">
                <label for="text-autocomplete">Text autocomplete</label>
            </div>
        </div>
    </div>
</form>

Sample usage


    // Sample
    var countries = [
        { value: 'Andorra', data: 'AD' },
        // ...
        { value: 'Zimbabwe', data: 'ZZ' }
    ];

    // Autocomplete -> search
    $('#doc-eq-ui-search-autocomplete input').autocomplete({
        lookup: countries,
        appendTo: '#doc-eq-ui-search-autocomplete',
        minChars: 2,
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

    // Autocomplete -> search expandable
    $('#doc-eq-ui-search-expandable-autocomplete input').autocomplete({
        lookup: countries,
        appendTo: '#doc-eq-ui-search-expandable-autocomplete',
        minChars: 2,
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

    // Autocomplete -> input
    $('#doc-text-autocomplete input').autocomplete({
        lookup: countries,
        appendTo: '#doc-text-autocomplete',
        minChars: 2,
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

Simple upload

JADE
HTML


form(action='#')
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-file
        a.btn.btn-primary.eq-ui-waves-light
          | Upload
          input#file_input_test1(type='file')
        .eq-ui-input-file-path
          input.eq-ui-input(type='text', readonly='')


<form action="#">
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-file">
                <a class="btn btn-primary eq-ui-waves-light">
                    Upload
                    <input id="file_input_test1" type="file">
                </a>
                <div class="eq-ui-input-file-path">
                    <input type="text" class="eq-ui-input" readonly>
                </div>
            </div>
        </div>
    </div>
</form>

Multiple upload

JADE
HTML


form(action='#')
  .row
    .col-md-12
      .eq-ui-form-group.eq-ui-input-file
        a.btn.btn-primary.eq-ui-waves-light
          | Upload
          input#file_input_test2(type='file', multiple='')
        .eq-ui-input-file-path
          input.eq-ui-input(type='text', placeholder='Upload one or more files', readonly='')


<form action="#">
    <div class="row">
        <div class="col-md-12">
            <div class="eq-ui-form-group eq-ui-input-file">
                <a class="btn btn-primary eq-ui-waves-light">
                    Upload
                    <input id="file_input_test2" type="file" multiple>
                </a>
                <div class="eq-ui-input-file-path">
                    <input type="text" class="eq-ui-input" placeholder="Upload one or more files" readonly>
                </div>
            </div>
        </div>
    </div>
</form>

Image preview for upload

UPLOAD AVATAR

JADE
HTML


// Avatar
ul.eq-ui-list.eq-ui-hoverable
  li#img-preview-file_input_test3.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate
    img.circle.img-preview(src='assets/img/doc/avatar/avatar_0.jpg')
    h6.eq-ui-list-title.img-preview-loading UPLOAD AVATAR

// Form
form(action='#')
  .row
    .col-md-12

      // Fake input file
      .eq-ui-form-group.eq-ui-input-file.eq-ui-input-file-fake
        a.btn.btn-primary.eq-ui-waves-light
          | Fake
          input#file_input_test3(type='file', data-img-preview='img-preview-file_input_test3', data-img-preview-text-loading='Loading...')
        .eq-ui-input-file-path
          input.eq-ui-input(type='text', readonly='')


<!-- Avatar -->
<ul class="eq-ui-list eq-ui-hoverable">
    <li id="img-preview-file_input_test3" class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-truncate">
        <img class="circle img-preview" src="assets/img/doc/avatar/avatar_0.jpg">
        <h6 class="eq-ui-list-title img-preview-loading">UPLOAD AVATAR</h6>
    </li>
</ul>

<!-- Form -->
<form action="#">
    <div class="row">
        <div class="col-md-12">

            <!-- Fake input file -->
            <div class="eq-ui-form-group eq-ui-input-file eq-ui-input-file-fake">
                <a class="btn btn-primary eq-ui-waves-light">
                    Fake
                    <input id="file_input_test3" type="file"
                    data-img-preview="img-preview-file_input_test3"
                    data-img-preview-text-loading="Loading...">
                </a>
                <div class="eq-ui-input-file-path">
                    <input type="text" class="eq-ui-input" readonly>
                </div>
            </div>

        </div>
    </div>
</form>

Based in DropzoneJS plugin. For more info and view the documentation, go to: DropzoneJS Doc

DRAG & DROP HERE
or Browse

Sample drop zone

JADE
HTML


ul.eq-ui-list.eq-ui-file-upload-drop-zone
  .eq-ui-file-upload-drop-zone-message.doc-drop-zone-message
    | DRAG & DROP HERE
    br
    span.doc-drop-zone-message-browse
      | or
      span.doc-drop-zone-message-browse-link Browse


<ul class="eq-ui-list eq-ui-file-upload-drop-zone">
    <div class="eq-ui-file-upload-drop-zone-message doc-drop-zone-message">
        DRAG & DROP HERE<br>
        <span class="doc-drop-zone-message-browse">or <span class="doc-drop-zone-message-browse-link">Browse</span></span>
    </div>
</ul>

Sample usage


$(document).ready(function(){

    // Create File Upload Drop
    var _dropzone = EqUI.forms.file_upload_drop('.eq-ui-file-upload-drop-zone', {
        url: 'http://domain/upload/',
        defaultImageThumbnail: "assets/img/doc/files/empty.png"
    });

    // File Upload Drop - Sample Event
    _dropzone.on("addedfile", function(file) {
        console.log(file);
    });

});

Forms

Input Fields

Text Area

Icon Fields

Validate Fields

Select

Search

Search Expandable

Radio Buttons

Checkboxes

Switches

Autocomplete

Search

Search expandable

Input

File Input

File Input - Image Preview

UPLOAD AVATAR

File Upload - Drag and Drop

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Forms

Input Fields

Text Area

Icon Fields

Validate Fields

Select

Search

Search Expandable

Radio Buttons

Checkboxes

Switches

Autocomplete

Search

Search expandable

Input

File Input

File Input - Image Preview

UPLOAD AVATAR

File Upload - Drag and Drop