Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Metro’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.


                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" placeholder="Enter email"/>
                            <small class="text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" placeholder="Enter email"/>
                        </div>
                        <div class="form-group">
                            <input type="checkbox" data-role="checkbox" data-caption="Remember me">
                        </div>
                        <div class="form-group">
                            <button class="button success">Submit data</button>
                            <input type="button" class="button" value="Cancel">
                        </div>
                    </form>

Form controls

Metro 4 styling all forms controls with direct styles or special classes. Now supports: all types of <input>, <select>, <textarea>, <checkbox> and <radio>. Included are styles for general appearance, focus state, sizing, and more.

Inputs

You can use default input or extended input.

Default input


                    <form>
                        <input type="text" class="mt-1">
                    </form>

Extended input with data-role="input"


                    <input type="text" data-role="input">

                    <input type="password" data-role="input">

                    <input type="text" data-role="input"
                        data-prepend="<span class='mif-user'></span>">

                    <input type="text" data-role="input" data-prepend="Email">

                    <script>
                        var customButtons = [
                            {
                                html: "<span class='mif-user'></span>",
                                cls: "alert",
                                onclick: "alert('ku from custom button')"
                            }
                        ]
                    </script>
                    <input type="text"
                        data-role="input"
                        data-clear-button="false"
                        data-custom-buttons="customButtons">

Additional functionality for input is implemented through the plugin input. To activate plugin and additional options add the attribute data-role="input" to element.

Additional options for extended input:

data-*	default	description
data-clear-button	true	Enable or disable clear button
data-clear-button-icon	<span class='mif-cross'></span>	Icon for clear button
data-reveal-button	true	Enable or disable reveal button for password inputs
data-reveal-button-icon	<span class='mif-eye'></span>	Icon for reveal button
data-on-input-create	$.noop()	Callback triggered when control created

Search

Metro 4 contains special plugin for creating search input with a built-in search button. To create search input, add attribute data-role="search" to input field.


                    <form>
                        <input type="text" data-role="search">
                    </form>

The search button will be of the submit type if you specify an attribute data-search-button-click="submit". If you set this attribute to other value, you can specify custom event for click event on search button with attribute data-on-search-button-click="...".

Select

Metro 4 uses a special wrapper to display the drop-down select. When you use Metro 4 select wrapper, you can styling every option with css classes. Use attribute data-role="select" to activate wrapper.


                    <select data-role="select">
                        <option class="fg-cyan">One</option>
                        <option class="text-bold fg-red">Two</option>
                        <option selected class="fg-green">Three</option>
                    </select>

Additional functionality for select is implemented through the plugin select. To activate plugin and additional options add the attribute data-role="select" to element.

Additional options:

data-*	default	description
data-drop-height	200px	Max height for drops
data-on-select-create	$.noop()	Callback triggered when control created
data-on-change	$.noop()	Callback triggered when value changed

Select in runtime

To set or get select value at runtime, use method val(). Calling a method without a parameter will return the current select value. Calling a method with a parameter will set value for select.


                    <select data-role="select">
                        <option value="1">Value 1</option>
                        <option value="2">Value 2</option>
                        <option value="3">Value 3</option>
                        <option value="4">Value 4</option>
                    </select>


                    function selectChangeValue(){
                        var new_value = Metro.utils.random(1, 4);
                        var select = $("select").data('select');

                        console.log("Current value: " + select.val());
                        console.log("New value: " + new_value);
                        select.val(new_value);
                        console.log("Result value: " + select.val());
                    }

To change select options at runtime, use method data(). You can use PLAIN HTML or JSON OBJECT to update options. When you execute method data(), options will be replaced in select. For more info see source if this example.

HTML example


                            <option value="mini">Mini</option>
                            <option value="site">Site</option>
                            <option value="portal">Portal</option>
                            <option value="portal">Corporate</option>
                            <optgroup label="Virtual servers">
                                <option value="evps1">eVPS-1</option>
                                <option value="evps2">eVPS-2</option>
                                <option value="evps4">eVPS-4</option>
                                <option value="evps8">eVPS-8</option>
                            </optgroup>

JSON example


                            {
                              "1": "Item 1",
                              "2": "Item 2",
                              "3": "Item 3",
                              "Item group": {
                                "1_1": "Item 1_1",
                                "2_2": "Item 2_2",
                                "3_3": "Item 3_3"
                              }
                            }


                    <select id="select1" data-role="select">...</select>
                    ...
                    $.get(_url_, function(response){
                        var select  = $('#select1').data('select');
                        select.data(response);
                    });

Textarea

Metro 4 uses a special wrapper to display the textarea. When you use Metro 4 textarea wrapper, you can enabling autosize feature. Use attribute data-role="textarea" to activate wrapper.


                    <textarea data-role="textarea"></textarea>
                    <textarea data-role="textarea" data-auto-size="true" data-max-height="200"></textarea>
                    <textarea data-role="textarea" disabled></textarea>

Additional functionality for textarea is implemented through the plugin textarea. To activate plugin and additional options add the attribute data-role="textarea" to element.

Additional options:

data-*	default	description
data-auto-size	false	Enabling autosize feature
data-on-textarea-create	$.noop()	Callback triggered when control created

Checkbox

Default checkbox is not styled, but you can add attribute data-role="checkbox" to element to styling.

Default checks

Metro 4 checkboxes


                    <input type="checkbox" data-role="checkbox" data-caption="Check">
                    <input type="checkbox" data-role="checkbox" data-caption="Check" checked>
                    <input type="checkbox" data-role="checkbox" data-caption="Check" indeterminate>
                    <input type="checkbox" data-role="checkbox" data-caption="Check" disabled>
                    <input type="checkbox" data-role="checkbox" data-caption="Check" disabled checked>

Additional functionality for input is implemented through the plugin checkbox. To activate plugin and additional options add the attribute data-role="checkbox" to element.

Additional options:

data-*	default	description
data-caption	empty	Caption for checkbox
data-caption-position	right	Caption position: right or left
data-on-checkbox-create	$.noop()	Callback triggered when control created

Indeterminate state

In Metro 4, the checkbox can have an indeterminate state. To set this state add or remove attribute indeterminate for/from input.


                    <input type="checkbox"
                        data-role="checkbox"
                        data-caption="Indeterminate"
                        indeterminate
                        id="indeterminate-checkbox">
                    <div class="mt-2">
                        <button class="button"
                            onclick="$('#indeterminate-checkbox').toggleAttr('indeterminate')">
                            Switch state
                        </button>
                    </div>

Warning! The toggleAttr() is not a native jQuery function. This is a Metro 4 jQuery extension function.

Radio

Default radio is not styled, but you can add attribute data-role="radio" to element to styling.

Default radio

Styled radio


                    <input type="radio" data-role="radio" data-caption="Check" name="r1">
                    <input type="radio" data-role="radio" data-caption="Check" name="r1" checked>
                    <input type="radio" data-role="radio" data-caption="Check" name="r2" disabled>
                    <input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled>

Additional functionality for input is implemented through the plugin radio. To activate plugin and additional options add the attribute data-role="radio" to element.

Additional options:

data-*	default	description
data-caption	empty	Caption for radio
data-caption-position	right	Caption position: right or left
data-on-radio-create	$.noop()	Callback triggered when control created

Switch

Metro 4 support additional styling for checkbox. Use attribute data-role="switch" to create checkbox styling as switch.


                    <input type="checkbox" data-role="switch" data-caption="Check">
                    <input type="checkbox" data-role="switch" data-caption="Check" checked>
                    <input type="checkbox" data-role="switch" data-caption="Check" disabled>
                    <input type="checkbox" data-role="switch" data-caption="Check" disabled checked>

Additional functionality for input is implemented through the plugin switch. To activate plugin and additional options add the attribute data-role="switch" to element.

Additional options:

data-*	default	description
data-caption	empty	Caption for switch
data-caption-position	right	Caption position: right or left
data-on-switch-create	$.noop()	Callback triggered when control created

File browser


                    <input type="file" data-role="file">
                    <input type="file" data-role="file" data-caption="Choose file">
                    <input type="file" data-role="file" data-caption="<span class='mif-folder'></span>">

Additional functionality for input is implemented through the plugin file. To activate plugin and additional options add the attribute data-role="file" to element.

Additional options:

data-*	default	description
data-caption	Choose file	Caption for element button
data-on-file-create	$.noop()	Callback triggered when control created

Form buttons


                    <input type="button" class="button" value="Button">
                    <input type="reset" class="button" value="Reset">
                    <input type="submit" class="button" value="Submit">

Layout

Since Metro 4 applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form groups

The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and control pairing. As a bonus, since it’s a class you can use it with <fieldset>, <div>, or nearly any other element.


                    <form>
                        <div class="form-group">
                            <label>Example label</label>
                            <input type="text">
                        </div>
                        <div class="form-group">
                            <label>Example label</label>
                            <input type="text">
                        </div>
                    </form>

Grid layout

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.


                    <form>
                        <div class="row">
                            <div class="cell-md-6">
                                <input type="text" placeholder="First name">
                            </div>
                            <div class="cell-md-6">
                                <input type="text" placeholder="Last name">
                            </div>
                        </div>
                    </form>

Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .cell-*-* classes to specify the width of your labels and controls.

Password

Radios

Checkbox


                    <form>
                        <div class="row mb-2">
                            <label class="cell-sm-2">Email</label>
                            <div class="cell-sm-10">
                                <input type="email">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label class="cell-sm-2">Password</label>
                            <div class="cell-sm-10">
                                <input type="password">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label class="cell-sm-2">Radios</label>
                            <div class="cell-sm-10">
                                <input name="horizontal_form_r1" type="radio"
                                    data-role="radio" data-caption="Option one" checked>
                                <input name="horizontal_form_r1" type="radio"
                                    data-role="radio" data-caption="Option two">
                                <input name="horizontal_form_r1" type="radio"
                                    data-role="radio" data-caption="Option three is disabled" disabled>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <label class="cell-sm-2">Checkbox</label>
                            <div class="cell-sm-10">
                                <input name="horizontal_form_c1" type="checkbox"
                                    data-role="checkbox" data-caption="Check me out" checked>
                            </div>
                        </div>
                        <div class="row">
                            <div class="cell">
                                <button type="submit" class="button primary">Sign in</button>
                            </div>
                        </div>
                    </form>

Inline form

Use the .inline-form class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.


                    <form class="inline-form">
                        <input type="text" placeholder="Your Name">
                        <input type="text" placeholder="Username">
                        <input type="checkbox" data-role="checkbox" data-caption="Remember me">
                        <button class="button success">Submit</button>
                    </form>

Accent colors

You can add accent colors to form elements such as <input>, <select> and <textarea>. You can use next classes: .primary, .secondary, .success, .alert, .warning, .yellow, .info, .dark.


                    <input type="text" class="alert">
                    <input type="password" class="success" data-role="input">
                    <textarea data-role="textarea" class="primary"></textarea>
                    <select class="warning" data-role="select">
                        <option class="fg-cyan">One</option>
                        <option class="text-bold fg-red">Two</option>
                        <option selected class="fg-green">Three</option>
                    </select>

Disabled forms

To disable form elements add the disabled boolean attribute to element.


                    <form>
                        <input type="text" data-role="input" disabled class="mb-1">
                        <input type="file" data-role="file" disabled class="mb-1">
                        <textarea data-role="textarea" disabled class="mb-1"></textarea>
                        <select data-role="select" disabled>
                            <option>One</option>
                            <option>Two</option>
                            <option>Three</option>
                        </select>
                    </form>

To disable elements at runtime:

Disable input Enable input


                    <input type="text" data-role="input" id="disable_input_runtime">
                    <input type="checkbox" data-role="switch" checked onclick="toggleInputState(this)">
                    <script>
                        function toggleInputState(el){
                            var i = $('#disable_enable_input_runtime');
                            $(el).is(':checked') ? i.attr('disabled', false) : i.attr('disabled', true);
                        }
                    </script>

Validation form

If you use default form elements (without defining data-role), you can provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

We highly recommended Metro 4 Validator plugin or other third-party plugins for validating form.

How it works

Here’s how default form validation works with Metro 4:

HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Add .custom-validation class to form
Add require attribute to element
To invalid feedback add text element after input (select, textarea) with class .invalid-feedback
Add novalidate attribute to form

First name

Last name

City

Please provide a valid city.

State

Please provide a valid state.

Zip

Please provide a valid zip.

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

First name

Last name

City

State

Zip

Use the power, Luke!

To better support form validation, use the plugin Metro 4 Validator. This plugin provides more functionality to validating form with special validation funcs include custom functions and patterns.

Rtl support

Metro supports rtl input method. To set Metro's rtl you can add metro-rtl.css to page head and add attribute dir with rtl value to element.

Inputs


                    <input type="text" dir="rtl">
                    <input type="text" dir="rtl" data-role="input" data-clear-button="true">

File browser


                    <input type="file" dir="rtl" data-role="file">

Textarea


                    <textarea dir="rtl"></textarea>
                    <textarea data-role="textarea" dir="rtl"></textarea>

Table of contents

Forms

Overview

Form controls

Inputs

Default input

Extended input with data-role="input"

Search

Select

Select in runtime

HTML example

JSON example

Textarea

Checkbox

Default checks

Metro 4 checkboxes

Indeterminate state

Radio

Default radio

Styled radio

Switch

File browser

Form buttons

Layout

Form groups

Grid layout

Horizontal form

Inline form

Accent colors

Disabled forms

Validation form

How it works

Browser defaults

Use the power, Luke!

Rtl support

Inputs

File browser

Textarea

Select