Formsdefinition

Metro UI CSS provides styling for form and form elements.

Default styles

Checkboxes

<div class="input-control checkbox">
    <label>
        <input type="checkbox" />
        <span class="check"></span>
        Check me out
    </label>
</div>

<div class="input-control checkbox">
    <label>
        <input type="checkbox" data-show="intermediate" />
        <span class="check"></span>
        Check me out
    </label>
</div>

Radio buttons

<div class="input-control radio">
    <label>
        <input type="radio" />
        <span class="check"></span>
        Check me out
    </label>
</div>

<div class="input-control radio default-style">
    <label>
        <input type="radio" />
        <span class="check"></span>
        Check me out
    </label>
</div>

Switch control

<div class="input-control switch">
    <label>
        <input type="checkbox" />
        <span class="check"></span>
    </label>
</div>

Input controls

Input text

<div class="input-control text">
    <input type="text" value="" placeholder="input text"/>
    <button class="btn-clear"></button>
</div>

<div class="input-control text">
    <input type="text" value="" placeholder="input text" disabled/>
    <button class="btn-clear"></button>
</div>

Metro UI 4 Jekyll also supports style for all types of input controls, such as tel, email, url, ...

Input password

<div class="input-control password">
    <input type="password" value="" placeholder="input password"/>
    <button class="btn-reveal"></button>
</div>

Select

<div class="input-control select">
    <select>
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
    </select>
</div>

<div class="input-control select">
    <select multiple>
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
    </select>
</div>

Textarea

<div class="input-control textarea">
    <textarea>...</textarea>
</div>

Input with sizeN class

Use .size1 to .size12 for .input-control to match the size of grid columns.

<div class="input-control text size2">
    <input type="text" />
</div>

Input validation states

You can set validation state for input with build-in classes as additional class for .input-control: .warning-state, .error-state, .info-state, .success-state.
Also, you can set data-state attribute for input, select or textarea with these values: warning, error, info and success.

<div class="input-control text warning-state">
    <input type="text" />
</div>

<div class="input-control text">
    <input type="text" data-state="success"/>
</div>

Search form

<div class="input-control text">
    <input type="text" />
    <button class="btn-search"></button>
</div>

Input file

<div class="input-control file">
    <input type="file" />
    <button class="btn-file"></button>
</div>

Input control plugin

The input control plugin metro-input-control.js provides functionality for clearing inputs, show password and input file.

Input Auto Transform

Input control plugin contains widget for form input auto transformation.

<input type="file" data-transform="input-control">

transforms to:
<div class="input-control file">
    <input type="file" />
    <button class="btn-file"></button>
</div>

Now supported:

<input type="text" data-transform="input-control" />
<input type="password" data-transform="input-control" />
<input type="file" data-transform="input-control" />
<input type="email" data-transform="input-control" />
<input type="tel" data-transform="input-control" />
<input type="checkbox" data-transform="input-control" />
<input type="checkbox" data-transform="input-control" data-transform-type="switch" />
<input type="radio" data-transform="input-control" />
<select data-transform="input-control" />
<textarea data-transform="input-control" />