1. Base
  2. Inputs
  3. Search
  4. Checkboxes & Radio
  5. Fieldset
  6. Small
  7. Big
  8. Width
  9. States
  10. Required
  11. Descriptions
  12. Disabled
  13. Append & Prepend
  14. Button Append
  15. More Examples

Base

This is the most basic form with all the basic inputs.

<form method="post" action="" class="mi-form">

    <div class="mi-form-item">
        <label>Email</label>
        <input type="email" name="email" class="mi-w50">
    </div>

    <div class="mi-form-item">
        <label>Country</label>
        <select>
            <option value="">---</option>
        </select>
    </div>

    <div class="mi-form-item">
        <label class="checkbox"><input type="checkbox"> Check me</label>
        <label class="checkbox"><input type="radio"> Radio me</label>
    </div>

    <div class="mi-form-item">
        <textarea rows="6"></textarea>
    </div>

    <div class="mi-form-item">
        <button>Log in</button>
        <button class="button secondary outline">Cancel</button>
    </div>

</form>

Inputs

Here's a standard input field with type set as text. Label serves as input's label, and the following div with class desc serves as an optional description.

This information helps us deliver orders on time.
<form class="mi-form">
    <div class="mi-form-item">
        <label>City</label>
        <input type="text">
        <div class="mi-form-desc">...</div>
    </div>
</form>

Here are two text input fields, one with a placeholder and another one disabled, both set to be 6 grid columns wide.

<form class="mi-form">
    <div class="mi-row mi-gutters">
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <input type="text" placeholder="Email">
            </div>
        </div>
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <input type="text" disabled="true" value="Disabled">
            </div>
        </div>
    </div>
</form>

Here's how you denote required fields with req class, and add descriptions to labels using span with class desc.

This information helps us deliver orders on time.
<form class="mi-form">
    <div class="mi-row mi-gutters">
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label>City <span class="mi-form-req">*</span></label>
                <input type="text">
            </div>
        </div>
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label>City <span class="mi-form-desc">...</span></label>
                <input type="text">
                <div class="mi-form-desc">...</div>
            </div>
        </div>
    </div>
</form>

<form class="mi-form">
    <div class="mi-form-item">
        <input type="text" class="mi-form-search">
    </div>
</form>

Checkboxes & Radio

Mikit features full variety of stylish checkboxes and radio buttons. You can feature them on your pages by defining input type as checkbox or radio. There's also a neat option to place checkboxes inline by adding .mi-form-checkboxes class to the container (works for both checkboxes and radio buttons)

<form method="post" action="" class="mi-form">
    <div class="mi-form-item mi-form-checkboxes">
        <label class="checkbox"><input type="checkbox"> Check 1</label>
        ...
    </div>
</form>

<form method="post" action="" class="mi-form">
    <div class="mi-form-item mi-form-checkboxes">
        <label class="checkbox"><input type="radio"> Check 1</label>
        ...
    </div>
</form>

Fieldset

Fieldsets in Mikit are nicely pre-formatted and ready to go. Just wrap your form in a fieldset tag and you're good to go.

Login data 
<fieldset>
    <legend>Login data</legend>
    <div class="mi-form-item">
        <label>Email</label>
        <input type="email" name="user-email" class="mi-w50">
    </div>
    <div class="mi-form-item">
        <label>Password</label>
        <input type="password" name="user-password" class="mi-w50">
    </div>
</fieldset>
About 
<fieldset>
    <legend>About</legend>
    <div class="mi-form-item">
        <textarea name="user-about" rows="5"></textarea>
    </div>
    <div class="mi-form-item">
        <button>Submit</button>
    </div>
</fieldset>

Small

Simple class .mi-form-small makes your selects and fields, well, smaller.

<form class="mi-form">
    <div class="mi-form-item">
        <input type="text" class="mi-form-small" placeholder="Title">
    </div>
    <div class="mi-form-item">
        <select class="mi-form-small">
            <option>...</option>
        </select>
    </div>
</form>

Big

Simple class .mi-form-big makes your selects and fields, well, bigger.

<form class="mi-form">
    <div class="mi-form-item">
        <input type="text" class="mi-form-big" placeholder="Title">
    </div>
    <div class="mi-form-item">
        <select class="mi-form-big">
            <option>...</option>
        </select>
    </div>
</form>

Width

Following framework-wide rules, it is very easy to manipulate form fields sizes. Just use mi-w50 class to make a field 50% wide or mi-w25 to a 25% wide.

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <input type="text" class="mi-w25">
    </div>
    <div class="mi-form-item">
        <input type="text" class="mi-w50">
    </div>
    <div class="mi-form-item">
        <input type="text" class="mi-w75">
    </div>
    <div class="mi-form-item">
        <input type="text" value="100% by default">
    </div>
</form>

States

By default, Mikit features two different states: success and failure.

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Your height <span class="mi-color-success">...</span></label>
        <input type="text" class="mi-form-success">
    </div>
</form>

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Enter your weight <span class="mi-color-error">...</span></label>
        <input type="text" class="mi-form-error>
    </div>
</form>

Required

Along with making a field actually required, you can add a visual clue for the users using a span with req class.

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Email <span class="mi-form-req">*</span></label>
        <input type="email" name="user-email">
    </div>
</form>

Descriptions

Descriptions are simple: as long as form's element has desc class, Mikit will treat it as a description.

Please enter your email.
<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Name <span class="mi-form-desc">...</span></label>
        <input type="text" name="user-name">
    </div>
    <div class="mi-form-item">
        <label>Email</label>
        <input type="email" name="user-email">
        <div class="mi-form-desc">...</div>
    </div>
</form>

Disabled

Not only text inputs can be disabled, but checkboxes and radio buttons as well. Just add disabled attribute or .mi-form-disabled class to the input.

<input type="text" value="" disabled>
<input type="checkbox" class="disabled">
<input type="radio" disabled>
<textarea disabled></textarea>
<select disabled>
    <option>...</option>
</select>

Append & Prepend

You can prepend or append certain elements within your input fields, such as currency characters.

$ 
<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>How much is it?</label>
        <div class="prepend mi-w50">
            <span>$</span>
            <input type="text">
        </div>
    </div>
</form>
$ 
<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>It is much how?</label>
        <div class="append">
            <input type="text"><span>$</span>
        </div>
    </div>
</form>

Button Append

Appending works for buttons as well. Here you can see a button that has been appended and included withing a text input field.

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Label</label>
        <div class="append mi-w50">
            <input type="text" name="mi-form-search" placeholder="mi-form-search">
            <button class="button outline">Go</button>
        </div>
    </div>
</form>

More Examples

The examples below are quite self explanatory and they cover multiple selections, selecting dates, filling in phone numbers, a ready feedback form template and more. Feel free to use any of these examples as templates for your sites.

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Select multiple</label>
        <select class="mi-w50" multiple="multiple" size="10">
            <optgroup label="Group 1">
                <option value="">...</option>
            </optgroup>
        </select>
    </div>
</form>
Month
Day
Year
<form method="post" action="" class="mi-form">
    <label>Choose date</label>
    <div class="mi-row mi-gutters">
        <div class="mi-col mi-col-3">
            <div class="mi-form-item">
                <select><option>---</option></select>
                <div class="mi-form-desc">Month</div>
            </div>
        </div>
        <div class="mi-col mi-col-3">
            <div class="mi-form-item">
                <select><option>---</option></select>
                <div class="mi-form-desc">Day</div>
            </div>
        </div>
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <select><option>---</option></select>
                <div class="mi-form-desc">Year</div>
            </div>
        </div>
    </div>
</form>
( )  ext:
Needed if there are questions about your order
<form method="post" action="" class="mi-form mi-form-inline">
    <div class="mi-form-item">
        <label>Phone number</label>
        ( <input type="text" name="phone-prefix" size="3" class="mi-form-small"> )
        <input type="text" name="phone-number" class="mi-form-small mi-w50">
        &nbsp;ext: <input type="text" name="phone-ext" size="3" class="mi-form-small">
        <div class="mi-form-desc">...</div>
    </div>
</form>

<form method="post" class="mi-form">
    <div class="mi-row mi-gutters">
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label>Email</label>
                <input type="email">
            </div>
        </div>
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label>Topic</label>
                <select>
                    <option value="">...</option>
                </select>
            </div>
        </div>
    </div>
    <div class="mi-form-item">
        <label>Message</label>
        <textarea rows="6"></textarea>
    </div>
</form>
Where are you from?
<form method="post" action="" class="mi-form">
    <div class="mi-row mi-gutters">
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label>Country</label>
                <select>
                    <option>---</option>
                </select>
                <div class="mi-form-desc">...</div>
            </div>
        </div>
        <div class="mi-col mi-col-6">
            <div class="mi-form-item">
                <label><br></label>
                <button>Submit</button>
            </div>
        </div>
    </div>
</form>

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Text</label>
        <textarea rows="4"></textarea>
    </div>
</form>

<form method="post" action="" class="mi-form">
    <div class="mi-form-item">
        <label>Text</label>
        <textarea rows="4" class="mi-w50"></textarea>
    </div>
</form>