To create a metro-styled text box, just add class="m-wrap" to any <input>, <select>, or <textarea> html element. Viola! You now have a basic modern-styled element.

Textboxes and Textareas

<textarea class="m-wrap" placeholder="Styled"></textarea>
<input type="text" class="m-wrap" placeholder="Styled" />

Checkboxes/Radio Buttons

<label class="m-checkbox m-wrap">
    <input type="checkbox" class="m-wrap" value="">
    First Choice
</label>
<label class="m-radio m-wrap">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    First Option	
</label>
<label class="m-radio m-wrap">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios2" value="option2">
    Second Option
</label>

Inline Radio Buttons/Checkboxes

Add the .inline class to the labels of a checkbox or radio group for them to line up in a single line.

<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios1" value="option1">
    First Choice
</label>
<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios2" value="option2" checked>
    Second Choice	
</label>
<label class="m-radio inline">
    <input type="radio" class="m-wrap" name="optionsRadios" id="optionsRadios3" value="option3">
    Third Choice
</label>

Dropdown Lists/List Views

<select class="m-wrap">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>
<br/>
<select multiple="multiple" class="m-wrap">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Filepicker

<input type="file" class="m-wrap">

Disabled Elements

To depict disabled elements, it needs to look like it's unusable. Add the disabled attribute in the element to make it look like its disabled. Place the readonly to make it uneditable. Lastly, use the m-uneditable-input with a span element if you prefer declaring the readonly style inside the class attribute of an element.

<textarea class="m-wrap" placeholder="Disabled" disabled></textarea>
<input type="text" class="m-wrap" disabled placeholder="Disabled"/>        
<br/>
<textarea class="m-wrap" placeholder="" readonly>Readonly</textarea>
<input type="text" class="m-wrap" readonly placeholder="" value="Readonly"/>         
<br/>                               
<span class="m-wrap m-uneditable-input">Uneditable

Appended Controls

You can also place text or buttons attached before or after any element. To place stuff before an element, wrap them around a span container with the add-on class. To set them before an element, wrap both the control and the add-on container with a m-input-prepend class, to set the text after a element you can use m-input-append. Do note that when using m-input-prepend you need to put the add-on container before the element, with m-input-append you need to put it after the control.

Note: the textarea, select, input type="file", input type="checkbox", and input type="radio" elements are not supported.

<div class="m-input-prepend">
  <span class="add-on">@</span>
  <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
</div>                    
<br/>
<div class="m-input-append">                      
  <input class="m-wrap" size="16" type="text" placeholder="">
  <span class="add-on"><i class="icon-font"></i></span>
</div>

You can combine both the m-input-prepend class and the m-input-append class to place stuff before and after an element.

<div class="m-input-prepend m-input-append">
  <span class="add-on">@</span>
  <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
  <span class="add-on">Username
</div>

You can also place buttons instead of text.

<div class="m-input-append">                      
    <input class="m-wrap" size="16" type="text" placeholder="Twitter Username">
    <button href="#" class="m-btn">Search</button>
    <button href="#" class="m-btn">Back</button>
</div>   
<br/>
<div class="m-input-prepend">                
    <button href="#" class="m-btn blue">Login</button>      
    <input class="m-wrap" size="16" type="password" placeholder="Your Password">
</div>                      

Control sizes

Use the m-ctrl-small, m-ctrl-medium, and m-ctrl-large to control the length of your textbox, textarea and select elements. There's the m-ctrl-huge class to create jumbo textboxes (textboxes with this size does not support the append and prepend classes). However, do note that this class is only supported with the input type="text" element.

<input type="text" class="m-wrap m-ctrl-small" placeholder=".m-ctrl-small"/> 
<br/>     
<input type="text" class="m-wrap m-ctrl-medium" placeholder=".m-ctrl-medium"/>         
<br/>
<input type="text" class="m-wrap m-ctrl-large" placeholder=".m-ctrl-large"/>     
<br/>   
<input type="text" class="m-wrap m-ctrl-huge" placeholder=".m-ctrl-huge"/>