Tool Bar
Webriq logo
Notifications

Forms

Input Fields

Input form components.


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>

Text Area

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


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>

Icon Fields

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


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>

Validate Fields

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


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>

Select


.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>



.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>



 .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>



// 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>

Radio Buttons


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>

Checkboxes


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>

Switches


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>

Autocomplete

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

Search
Search expandable
Input

Sample autocomplete


// 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);
        }
    });

File Input

Simple upload


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


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>

File Input - Image Preview

Image preview for upload

  • UPLOAD AVATAR

// 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>

File Upload - Drag and Drop

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

    DRAG & DROP HERE
    or Browse

Sample drop zone


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);
    });

});