Components Forms
BasMaterial UI logo

© BasMaterial UI - v0.2.8

Notifications
View All

Forms

Forms provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Input Fields

Input form components.


<form>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <input id="first_name" type="text" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <input id="last_name" type="text" class="bas-ui-input">
                        <label for="last_name">Last Name</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <input id="password" type="password" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <input id="email" type="email" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <select id="gender" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <input placeholder="Placeholder" id="country" type="text" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <input id="disabled" type="text" value="I am not editable" class="bas-ui-input" disabled>
                        <label for="disabled">Disabled</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Text Area

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


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <textarea id="textarea_field" rows='1' class="bas-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>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="bas-ui-form-group bas-ui-input-field">
                        <i class="mdi mdi-account-circle bas-ui-icon prefix"></i>
                        <input id="first_name_pre" type="text" class="bas-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="bas-ui-form-group bas-ui-input-field">
                        <i class="mdi mdi-phone bas-ui-icon prefix"></i>
                        <input id="icon_telephone" type="tel" class="bas-ui-input">
                        <label for="icon_telephone">Telephone</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <i class="mdi mdi-comment-text bas-ui-icon prefix"></i>
                <textarea id="icon_textarea" rows='1' class="bas-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>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group bas-ui-input-field">
                <input id="email_val" type="email" class="bas-ui-input validate">
                <label for="email_val" data-error="wrong" data-success="right">Email</label>
            </div>
        </div>
    </div>
</form>

Select


<div class="bas-ui-form-group bas-ui-input-field">
    <select class="bas-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>



<div class="bas-ui-form-group bas-ui-input-field">
    <select class="bas-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>



<div class="bas-ui-form-group bas-ui-browser-select-field">
    <span class="bas-ui-caret"></span>
    <select class="bas-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 class="bas-ui-browser-select" disabled>
...

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

Radio Buttons


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

Checkboxes


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

Switches


<form>
    <div class="row">
        <div class="col-md-12">
            <div class="bas-ui-form-group">
                <!-- Switch -->
                <div class="bas-ui-switch">
                    <label>
                        Off
                        <input type="checkbox">
                        <span class="lever"></span>
                        On
                    </label>
                </div>
            </div>
            <div class="bas-ui-form-group">
                <!-- Disabled Switch -->
                <div class="bas-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 class="doc-form">
    <div class="row">
        <div class="col-md-12">
            <div id="doc-bas-ui-search-autocomplete" class="bas-ui-search">
                <input type="text" placeholder="Search">
                <i class="bas-ui-search-icon-left mdi mdi-magnify bas-ui-icon bas-ui-icon-left"></i>
                <i class="bas-ui-search-clear mdi mdi-close bas-ui-icon bas-ui-icon-right bas-ui-icon-18"></i>
            </div>
        </div>
    </div>
</form>

<!-- Search expandable -->
<form class="doc-form">
    <div class="row">
        <div class="col-md-12">
            <div id="doc-bas-ui-search-expandable-autocomplete" class="bas-ui-search bas-ui-search-expandable left">
                <input type="text" placeholder="Search">
                <a class="bas-ui-search-icon-left bas-ui-serach-expandable-show bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-button-fab bas-ui-button-fab-xs bas-ui-waves">
                    <i class="mdi mdi mdi-magnify bas-ui-icon"></i>
                </a>
                <i class="bas-ui-search-clear mdi mdi-close bas-ui-icon bas-ui-icon-right bas-ui-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="bas-ui-form-group bas-ui-input-field">
                <input id="text-autocomplete" type="text" class="bas-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-bas-ui-search-autocomplete input').autocomplete({
        lookup: countries,
        appendTo: '#doc-bas-ui-search-autocomplete',
        minChars: 2,
        onSelect: function (suggestion) {
            console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

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

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

File Input

Simple upload

Upload 

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

Multiple upload

Upload 

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

File Input - Image Preview

Image preview for upload

  • UPLOAD AVATAR
Fake 

<!-- Avatar -->
<ul class="bas-ui-list bas-ui-hoverable">
    <li id="img-preview-file_input_test3" class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-truncate">
        <img class="circle img-preview" src="assets/img/avatar/avatar_0.jpg">
        <h6 class="bas-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="bas-ui-form-group bas-ui-input-file bas-ui-input-file-fake">
                <a class="bas-ui-button bas-ui-button-primary bas-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="bas-ui-input-file-path">
                    <input type="text" class="bas-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 class="bas-ui-list bas-ui-file-upload-drop-zone">
    <div class="bas-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 = BasUI.Forms.fileUploadDrop('.bas-ui-file-upload-drop-zone', {
        url: 'http://domain/upload/',
        defaultImageThumbnail: "assets/img/files/empty.png"
    });

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

});