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.

We'll never share your email with anyone else.

                    <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

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.

In version 4.2.0, component receive new feature: filtering.

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
data-filter true Enable/disable list filtering. Default is true
data-filter-placeholder Placeholder for filter input

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" data-indeterminate="true">
                    <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 data-indeterminate="true" 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('data-indeterminate', 'true')"
                        >Set state</button>
                        <button class="button"
                            onclick="$('#indeterminate-checkbox').toggleAttr('data-indeterminate', 'false')"
                        >Remove 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.


                    <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
Please provide a valid city.
Please provide a valid state.
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.

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>
                

Select