metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Forms - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Forms</a></li> <li class="toc-entry"><a href="#_overview">Overview</a></li> <li class="toc-entry"> <a href="#_form_controls">Form controls</a> <ul> <li class="toc-entry"><a href="#_inputs">Input</a></li> <li class="toc-entry"><a href="#_tag-input">Tag input</a></li> <li class="toc-entry"><a href="#_spinner">Spinner</a></li> <li class="toc-entry"><a href="#_search">Search</a></li> <li class="toc-entry"><a href="#_select">Select</a></li> <li class="toc-entry"><a href="#_textarea">Textarea</a></li> <li class="toc-entry"><a href="#_checkbox">Checkbox</a></li> <li class="toc-entry"><a href="#_radio">Radio</a></li> <li class="toc-entry"><a href="#_switch">Switch</a></li> <li class="toc-entry"><a href="#_file">File browser</a></li> <li class="toc-entry"><a href="#_form_buttons">Buttons</a></li> </ul> </li> <li class="toc-entry"> <a href="#_layout">Layout</a> <ul> <li class="toc-entry"><a href="#_form_groups">Form groups</a></li> <li class="toc-entry"><a href="#_grid_layout">Grid layout</a></li> <li class="toc-entry"><a href="#_horizontal_form">Horizontal form</a></li> <li class="toc-entry"><a href="#_inline_form">Inline form</a></li> </ul> </li> <li class="toc-entry"><a href="#_accent_colors">Accent colors</a></li> <li class="toc-entry"><a href="#_disabled_forms">Disabled forms</a></li> <li class="toc-entry"> <a href="#_validation">Validation</a> <ul> <li class="toc-entry"><a href="#_validation_how">How it works</a></li> <li class="toc-entry"><a href="#_validation_browser">Browser defaults</a></li> <li class="toc-entry"><a href="#_validation_plugin">Use the power, Luke!</a></li> </ul> </li> <li class="toc-entry"><a href="#_forms_rtl">Rtl support</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Forms</h1> <p class="text-leader"> Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. </p>  <h3 id="_overview">Overview</h3> <p> 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. </p> <p> Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g., <code>email</code> for email address or <code>number</code> for numerical information) to take advantage of newer input controls like email verification, number selection, and more. </p> <div class="example pb-0"> <form class="mb-2"> <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" title=""> </div> <div class="form-group"> <button class="button success">Submit data</button> <input type="button" class="button" value="Cancel"> </div> </form> </div> <pre class=""><code> <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> </code></pre> <h3 id="_form_controls">Form controls</h3> <p> Metro 4 styling all forms controls with direct styles or special classes. Now supports: all types of <code><input></code>, <code><select></code>, <code><textarea></code>, <code><checkbox></code> and <code><radio></code>. Included are styles for general appearance, focus state, sizing, and more. </p> <h4 id="_inputs">Inputs</h4> <p> You can use default <code>input</code> or <code>extended input</code>. </p> <h6>Default input</h6> <div class="example pb-0"> <form class="mb-2"> <input type="text" class="mt-1" title=""> </form> </div> <pre><code class="html"> <form> <input type="text" class="mt-1"> </form> </code></pre> <h6>Extended input with data-role="input"</h6> <div class="example pb-0"> <form class="mb-2"> <label>Input</label> <input type="text" data-role="input" class="mb-1" title=""> <label>Password</label> <input type="password" data-role="input" class="mb-1" title=""> <label>Input with prepend</label> <input type="text" data-role="input" class="mb-1" data-prepend="<span class='mif-user'></span>" title=""> <input type="text" data-role="input" class="mb-1" data-prepend="Email" title=""> <label>Input with append</label> <input type="text" data-role="input" class="mb-1" data-append="<span class='mif-user'></span>" title=""> <input type="text" data-role="input" class="mb-1" data-append="Email" title=""> <label>Input with append & prepend</label> <input type="text" data-role="input" class="mb-1" data-prepend="<span class='mif-dollar2'></span>" data-append="<span>0.00</span>" title=""> <script> var customButtons = [ { html: "<span class='mif-user'></span>", cls: "alert", onclick: "alert('ku from custom button')" } ] </script> <label>Custom button</label> <input type="text" data-role="input" data-clear-button="false" class="mb-1" data-custom-buttons="customButtons" title=""> </form> </div> <pre class=""><code> <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"> <input type="text" data-role="input" data-append="Email"> <input type="text" data-role="input" class="mb-1" data-prepend="<span class='mif-dollar2'></span>" data-append="<span>0.00</span>" title=""> <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"> </code></pre> <p> Additional functionality for input is implemented through the plugin <code>input</code>. To activate plugin and additional options add the attribute <code>data-role="input"</code> to element. </p> <h4 id="_tag-input">Tag input</h4> <p class="text-small">New in 4.2.18</p> <p> To create tag input, add attribute <code>data-role="taginput"</code> to input field. Enter tag name and press <kbd>Enter</kbd> or <kbd>,</kbd> </p> <div class="example"> <form class="mb-2"> <input type="text" data-role="taginput" class="mb-1" title=""> </form> </div> <pre><code class="html"> <form> <input type="text" data-role="taginput"> </form> </code></pre> <div class="example"> <p>Init values</p> <input type="text" data-role="taginput" class="mt-4" value="css, javascript, html, metro 4"> <p>Specific tags colors</p> <input type="text" data-role="taginput" class="mt-4" data-cls-tag="bg-cyan fg-white" data-cls-tag-remover="bg-darkCyan fg-white"> <p>Random tag colors</p> <input type="text" data-role="taginput" class="mt-4" data-random-color="true"> <p>Events</p> <input type="text" data-role="taginput" class="mt-4" data-on-tag="$('#output').text(this.value)"> <div class="debug p-10 mt-4 text-center" id="output"></div> </div> <pre><code> <p>Init values</p> <input type="text" data-role="taginput" class="mt-4" value="css, javascript, html, metro 4"> <p>Specific tags colors</p> <input type="text" data-role="taginput" class="mt-4" data-cls-tag="bg-cyan fg-white" data-cls-tag-remover="bg-darkCyan fg-white"> <p>Random tag colors</p> <input type="text" data-role="taginput" class="mt-4" data-random-color="true"> <p>Events</p> <input type="text" data-role="taginput" class="mt-4" data-on-tag="$('#output').text(this.value)"> <div class="debug p-10 mt-4 text-center" id="output"></div> </code></pre> <h4 id="_spinner">Spinner</h4> <p class="text-small">New in 4.2.20</p> <p> To create <code>spinner</code>, add attribute <code>data-role="spinner"</code> to input field. </p> <div class="example"> <input type="text" data-role="spinner" class="mb-1" title=""> </div> <pre><code class="html"> <input type="text" data-role="spinner"> </code></pre> <div class="example"> <p>Min - 0, max - 5</p> <input type="text" data-role="spinner" data-min-value="0" data-max-value="5"> <p>Step - 0.52, fixed - 2</p> <input type="text" data-role="spinner" data-step=".52" data-fixed="2"> <p>Buttons left</p> <input type="text" data-role="spinner" data-buttons-position="left"> <p>Buttons right</p> <input type="text" data-role="spinner" data-buttons-position="right"> <p>Additional classes</p> <input type="text" data-role="spinner" data-cls-spinner-value="text-bold bg-cyan fg-white" data-cls-spinner-button="info" data-plus-icon="<span class='mif-plus fg-white'></span>" data-minus-icon="<span class='mif-minus fg-white'></span>"> </div> <pre><code> <p>Min - 0, max - 5</p> <input type="text" data-role="spinner" data-min-value="0" data-max-value="5"> <p>Step - 0.52, fixed - 2</p> <input type="text" data-role="spinner" data-step=".52" data-fixed="2"> <p>Buttons left</p> <input type="text" data-role="spinner" data-buttons-position="left"> <p>Buttons right</p> <input type="text" data-role="spinner" data-buttons-position="right"> <p>Additional classes</p> <input type="text" data-role="spinner" data-cls-spinner-value="text-bold bg-cyan fg-white" data-cls-spinner-button="info" data-plus-icon="<span class='mif-plus fg-white'></span>" data-minus-icon="<span class='mif-minus fg-white'></span>"> </code></pre> <p> You can set or get <code>spinner</code> value with method <code>val()</code>. Also you can set or get value with input attribute <code>value</code>. To set to default value, you can use attribute <code>data-default-value</code> and method <code>toDefault()</code>. </p>. <h4 id="_search">Search</h4> <p> You can define <code>input</code> as <code>search-input</code>. To create search input, enable <code>search-button</code> with attribute <code>data-search-button="true"</code>. </p> <div class="example"> <form class="mb-2"> <input type="text" data-role="input" data-search-button="true" class="mb-1" title=""> </form> </div> <pre><code class="html"> <form> <input type="text" data-role="input" data-search-button="true"> </form> </code></pre> <p> The <code>search button</code> will be of the <code>submit</code> type if you specify an attribute <code>data-search-button-click="submit"</code>. If you set this attribute to other value, you can specify custom event for click event on search button with attribute <code>data-on-search-button-click="..."</code>. </p> <h4 id="_select">Select</h4> <p> 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 <code>data-role="select"</code> to activate wrapper. </p> <h6 class="mt-4">Single</h6> <div class="example pb-0"> <form class="mb-2"> <div class="row"> <div class="cell-md-6"> <select data-role="select" title=""> <option class="fg-cyan" value="1">One</option> <option selected class="text-bold fg-red" value="2">Two</option> <option class="fg-green" value="3">Three</option> </select> </div> <div class="cell-md-6"> <select data-role="select" title=""> <optgroup label="Physical servers"> <option value="dedicated_corei3_hp">Core i3 (hp)</option> <option value="dedicated_pentium_hp">Pentium (hp)</option> <option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option> <option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option> <option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option> <option value="dedicated_xeon_hp">Xeon (hp)</option> <option value="dedicated_xeon">Xeon</option> <option value="dedicated_xeon_sata">Xeon SATA</option> <option value="dedicated_dual_xeon">Dual Xeon</option> <option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option> <option value="dedicated_smart_xeon">Smart Xeon</option> <option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option> <option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option> <option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option> <option value="colo_new_2u">Colocation 2U</option> <option value="colo_new_4u">Colocation 4U</option> </optgroup> <optgroup label="Virtual hosting"> <option value="mini">Mini</option> <option value="site">Site</option> <option value="portal">Portal</option> </optgroup> <optgroup label="Virtual servers"> <option value="evps0">eVPS-TEST (30 дней)</option> <option value="evps1" selected="selected">eVPS-1</option> <option value="evps2">eVPS-2</option> <option value="evps4">eVPS-4</option> <option value="evps8">eVPS-8</option> <option value="evps16">eVPS-16</option> <option value="evps32">eVPS-32</option> <option value="evps64">eVPS-64</option> <option value="evps128">eVPS-128</option> </optgroup> </select> </div> </div> </form> </div> <pre class=""><code> <select data-role="select"> <option class="fg-cyan">One</option> <option selected class="text-bold fg-red">Two</option> <option class="fg-green">Three</option> </select> <select data-role="select"> <optgroup label="Virtual hosting"> <option value="mini">Mini</option> <option value="site">Site</option> <option value="portal">Portal</option> </optgroup> <optgroup label="Virtual servers"> <option value="evps0">eVPS-TEST (30 дней)</option> <option value="evps1" selected="selected">eVPS-1</option> <option value="evps2">eVPS-2</option> <option value="evps4">eVPS-4</option> <option value="evps8">eVPS-8</option> <option value="evps16">eVPS-16</option> <option value="evps32">eVPS-32</option> <option value="evps64">eVPS-64</option> <option value="evps128">eVPS-128</option> </optgroup> </select> </code></pre> <h6 class="mt-4">Multiple</h6> <p class="text-small">New in 4.2.18</p> <p> Metro 4 also support select with <code>multiple</code> option. Each selected option in multiple displayed as tag. </p> <div class="example"> <select data-role="select" title="" multiple> <optgroup label="Physical servers"> <option value="dedicated_corei3_hp">Core i3 (hp)</option> <option value="dedicated_pentium_hp">Pentium (hp)</option> <option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option> <option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option> <option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option> <option value="dedicated_xeon_hp">Xeon (hp)</option> <option value="dedicated_xeon">Xeon</option> <option value="dedicated_xeon_sata">Xeon SATA</option> <option value="dedicated_dual_xeon">Dual Xeon</option> <option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option> <option value="dedicated_smart_xeon">Smart Xeon</option> <option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option> <option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option> <option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option> <option value="colo_new_2u">Colocation 2U</option> <option value="colo_new_4u">Colocation 4U</option> </optgroup> <optgroup label="Virtual hosting"> <option value="mini">Mini</option> <option value="site">Site</option> <option value="portal">Portal</option> </optgroup> <optgroup label="Virtual servers"> <option value="evps0">eVPS-TEST (30 дней)</option> <option value="evps1" selected="selected">eVPS-1</option> <option value="evps2">eVPS-2</option> <option value="evps4">eVPS-4</option> <option value="evps8">eVPS-8</option> <option value="evps16">eVPS-16</option> <option value="evps32">eVPS-32</option> <option value="evps64">eVPS-64</option> <option value="evps128">eVPS-128</option> </optgroup> </select> </div> <pre><code> <select data-role="select" title="" multiple> <optgroup label="Physical servers"> <option value="dedicated_corei3_hp">Core i3 (hp)</option> <option value="dedicated_pentium_hp">Pentium (hp)</option> <option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option> <option value="dedicated_smart_pentium_hp">Smart Pentium (hp)</option> <option value="dedicated_smart_xeon_hp">Smart Xeon (hp)</option> <option value="dedicated_xeon_hp">Xeon (hp)</option> <option value="dedicated_xeon">Xeon</option> <option value="dedicated_xeon_sata">Xeon SATA</option> <option value="dedicated_dual_xeon">Dual Xeon</option> <option value="dedicated_dual_xeon_sata">Dual Xeon SATA</option> <option value="dedicated_smart_xeon">Smart Xeon</option> <option value="dedicated_smart_xeon_sata">Smart Xeon SATA</option> <option value="dedicated_smart_dual_xeon">Smart Dual Xeon</option> <option value="dedicated_smart_dual_xeon_sata">Smart Dual Xeon SATA</option> <option value="colo_new_2u">Colocation 2U</option> <option value="colo_new_4u">Colocation 4U</option> </optgroup> <optgroup label="Virtual hosting"> <option value="mini">Mini</option> <option value="site">Site</option> <option value="portal">Portal</option> </optgroup> <optgroup label="Virtual servers"> <option value="evps0">eVPS-TEST (30 дней)</option> <option value="evps1" selected="selected">eVPS-1</option> <option value="evps2">eVPS-2</option> <option value="evps4">eVPS-4</option> <option value="evps8">eVPS-8</option> <option value="evps16">eVPS-16</option> <option value="evps32">eVPS-32</option> <option value="evps64">eVPS-64</option> <option value="evps128">eVPS-128</option> </optgroup> </select> </code></pre> <h6 class="mt-4">Option templates</h6> <p class="text-small">New in 4.2.18</p> <p> You can use attribute <code>data-template</code> for option for define html option display. Example: you need to add <code>icon</code> to option. <code>$1</code> in template, used for replace by option text. </p> <div class="example"> <select data-role="select" title=""> <optgroup label="Physical servers"> <option value="dedicated_corei3_hp" data-template="<span class='mif-server icon'></span> $1">Core i3 (hp)</option> <option value="dedicated_pentium_hp" data-template="<span class='mif-server icon'></span> $1">Pentium (hp)</option> <option value="dedicated_smart_corei3_hp" data-template="<span class='mif-server icon'></span> $1">Smart Core i3 (hp)</option> <option value="dedicated_smart_pentium_hp" data-template="<span class='mif-server icon'></span> $1">Smart Pentium (hp)</option> </optgroup> <optgroup label="Virtual servers"> <option value="evps0" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-TEST (30 дней)</option> <option value="evps1" selected="selected" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-1</option> <option value="evps2" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-2</option> <option value="evps4" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-4</option> </optgroup> </select> </div> <pre><code> <select data-role="select" title=""> <optgroup label="Physical servers"> <option value="11" data-template="<span class='mif-server icon'></span> $1">Core i3 (hp)</option> <option value="12" data-template="<span class='mif-server icon'></span> $1">Pentium (hp)</option> <option value="13" data-template="<span class='mif-server icon'></span> $1">Smart Core i3 (hp)</option> <option value="14" data-template="<span class='mif-server icon'></span> $1">Smart Pentium (hp)</option> </optgroup> <optgroup label="Virtual servers"> <option value="21" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-TEST (30 дней)</option> <option value="22" selected="selected" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-1</option> <option value="23" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-2</option> <option value="24" data-template="<span class='mif-insert-template icon'></span> $1">eVPS-4</option> </optgroup> </select> </code></pre> <p> Additional functionality for select is implemented through the plugin <code>select</code>. To activate plugin and additional options add the attribute <code>data-role="select"</code> to element. </p> <p> In version <code>4.2.0</code>, component receive new feature: <code>filtering</code>. </p> <h4>Select in runtime</h4> <p> To set or get <code>select</code> value at runtime, use method <code>val()</code>. Calling a method without a parameter will return the current <code>select</code> value. Calling a method with a parameter will set value for <code>select</code>. </p> <pre><code class="html"> <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> </code></pre> <pre><code class="javascript"> 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()); } </code></pre> <p> To change select options at runtime, use method <code>data()</code>. You can use <code>PLAIN HTML</code> or <code>JSON OBJECT</code> to update options. When you execute method <code>data()</code>, options will be replaced in select. For more info see source if <a href="examples/ajax/select.html">this example</a>. </p> <div class="row mt-2"> <div class="cell-md-6"> <h6 class="text-light">HTML example</h6> <pre><code> <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> </code></pre> </div> <div class="cell-md-6"> <h6 class="text-light">JSON example</h6> <pre><code class="json"> { "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" } } </code></pre> </div> </div> <pre><code> <select id="select1" data-role="select">...</select> ... $.get(_url_, function(response){ var select = $('#select1').data('select'); select.data(response); }); </code></pre> <h4 id="_textarea">Textarea</h4> <p> Metro 4 uses a special wrapper to display the textarea. When you use Metro 4 textarea wrapper, you can enabling <code>autosize</code> feature. Use attribute <code>data-role="textarea"</code> to activate wrapper. </p> <div class="example mb-2"> <form> <textarea placeholder="Default" class="mb-1"></textarea> <textarea data-role="textarea" placeholder="Autosize" data-auto-size="true" class="mb-1"></textarea> <textarea data-role="textarea" placeholder="Autosize" data-auto-size="true" class="mb-1" data-prepend="<span class='mif-bubbles'></span>"></textarea> <textarea data-role="textarea" placeholder="Disabled" disabled></textarea> </form> </div> <pre class=""><code> <textarea data-role="textarea"></textarea> <textarea data-role="textarea" data-auto-size="true" data-max-height="200"></textarea> <textarea data-role="textarea" disabled></textarea> </code></pre> <p> Additional functionality for textarea is implemented through the plugin <code>textarea</code>. To activate plugin and additional options add the attribute <code>data-role="textarea"</code> to element. </p> <h4 id="_checkbox">Checkbox</h4> <p> Default checkbox is not styled, but you can add attribute <code>data-role="checkbox"</code> to element to styling. </p> <h6>Default checks</h6> <div class="example"> <input type="checkbox" title=""> <input type="checkbox" checked title=""> <input type="checkbox" disabled title=""> <input type="checkbox" disabled checked title=""> </div> <h6 class="mt-2">Metro 4 checkboxes</h6> <div class="example mb-2"> <p class="text-bold">Style 1</p> <form> <input type="checkbox" data-role="checkbox" data-caption="Unchecked" title=""> <input type="checkbox" data-role="checkbox" data-caption="Checked" checked title=""> <input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" title=""> <input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title=""> <input type="checkbox" data-role="checkbox" data-caption="Disabled checked" disabled checked title=""> </form> <p class="text-bold">Style 2 <span class="text-small">New in 4.2.18</span></p> <form> <input type="checkbox" data-role="checkbox" data-caption="Unchecked" title="" data-style="2"> <input type="checkbox" data-role="checkbox" data-caption="Checked" checked title="" data-style="2"> <input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" title="" data-style="2"> <input type="checkbox" data-role="checkbox" data-caption="Disabled" disabled title="" data-style="2"> <input type="checkbox" data-role="checkbox" data-caption="Disabled checked" disabled checked title="" data-style="2"> </form> </div> <pre class=""><code> <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> <input type="checkbox" data-role="checkbox" data-caption="Check" data-style="2"> </code></pre> <p> Additional functionality for input is implemented through the plugin <code>checkbox</code>. To activate plugin and additional options add the attribute <code>data-role="checkbox"</code> to element. </p> <h4>Indeterminate state</h4> <p> In Metro 4, the checkbox can have an indeterminate state. To set this state add or remove attribute <code>data-indeterminate="true"</code> for/from input. </p> <div class="example"> <input type="checkbox" data-role="checkbox" data-caption="Indeterminate" data-indeterminate="true" id="indeterminate-checkbox" title=""> <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> </div> <pre><code> <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> </code></pre> <p class="remark warning"> Warning! The <code>toggleAttr()</code> is not a native jQuery function. This is a Metro 4 jQuery extension function. </p> <h4 id="_radio">Radio</h4> <p> Default radio is not styled, but you can add attribute <code>data-role="radio"</code> to element to styling. </p> <h6 class="mt-4">Default radio</h6> <div class="example"> <form> <input type="radio" name="r1" title=""> <input type="radio" name="r1" checked title=""> <input type="radio" name="r2" disabled title=""> <input type="radio" name="r2" disabled checked title=""> </form> </div> <h6 class="mt-2">Styled radio</h6> <div class="example mb-2"> <p class="text-bold">Style 1</p> <form> <input type="radio" data-role="radio" data-caption="Check" name="r1" title=""> <input type="radio" data-role="radio" data-caption="Check" name="r1" checked title=""> <input type="radio" data-role="radio" data-caption="Check" name="r2" disabled title=""> <input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled title=""> </form> <p class="text-bold">Style 2 <span class="text-small">New in 4.2.18</span></p> <form> <input type="radio" data-role="radio" data-caption="Check" name="r1" title="" data-style="2"> <input type="radio" data-role="radio" data-caption="Check" name="r1" checked title="" data-style="2"> <input type="radio" data-role="radio" data-caption="Check" name="r2" disabled title="" data-style="2"> <input type="radio" data-role="radio" data-caption="Check" name="r2" checked disabled title="" data-style="2"> </form> </div> <pre class=""><code> <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> <input type="radio" data-role="radio" data-caption="Check" name="r1" data-style="2"> </code></pre> <p> Additional functionality for input is implemented through the plugin <code>radio</code>. To activate plugin and additional options add the attribute <code>data-role="radio"</code> to element. </p> <h4 id="_switch">Switch</h4> <p> Metro 4 support additional styling for checkbox. Use attribute <code>data-role="switch"</code> to create checkbox styling as <code>switch</code>. </p> <div class="example"> <form>