Wrap form inputs in a .mui-textfield class to use MUI styling.
<form class="mui-form">
<legend>Title</legend>
<div class="mui-textfield">
<input type="text" placeholder="Input 1">
</div>
<div class="mui-textfield">
<input type="text" placeholder="Input 2">
</div>
<div class="mui-textfield">
<textarea placeholder="Textarea"></textarea>
</div>
<button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>
Append a <label> element to a textfield to add a fixed label.
<form class="mui-form">
<legend>Title</legend>
<div class="mui-textfield">
<input type="text">
<label>Input 1</label>
</div>
<div class="mui-textfield">
<input type="text">
<label>Input 2</label>
</div>
<div class="mui-textfield">
<textarea></textarea>
<label>Textarea</label>
</div>
<button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>
Use the .mui-textfield--float-label class to float labels.
<form class="mui-form">
<legend>Title</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text">
<label>Input 1</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" value="Value on load">
<label>Input 2</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<textarea>Value on load</textarea>
<label>Textarea</label>
</div>
<button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>
Attach the .mui-form--inline class to the <form> element to inline inputs above the small breakpoint.
<form class="mui-form--inline">
<div class="mui-textfield">
<input type="text">
</div>
<button class="mui-btn">submit</button>
</form>
Wrap checkbox and radio elements in a div with class .mui-checkbox or .mui-radio.
<form>
<div class="mui-checkbox">
<label>
<input type="checkbox" value="" checked>
Option one
</label>
</div>
<div class="mui-checkbox">
<label>
<input type="checkbox" value="">
Option two
</label>
</div>
<div class="mui-checkbox">
<label>
<input type="checkbox" value="" disabled>
Option three is disabled
</label>
</div>
<div class="mui-radio">
<label>
<input type="radio"
name="optionsRadios"
id="optionsRadios1"
value="option1"
checked>
Option one
</label>
</div>
<div class="mui-radio">
<label>
<input type="radio"
name="optionsRadios"
id="optionsRadios2"
value="option2">
Option two
</label>
</div>
<div class="mui-radio">
<label>
<input type="radio"
name="optionsRadios"
id="optionsRadios3"
value="option3"
disabled>
Option three is disabled
</label>
</div>
</form>
Wrap select elements in a div with class .mui-select. Please note that MUI uses the browser's default <select> menu UI on mobile interfaces.
<form class="mui-form">
<legend>Title</legend>
<div class="mui-select">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<label>Select Example</label>
</div>
<div class="mui-select">
<select>
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 3</option>
<option>Option 4</option>
</optgroup>
</select>
<label>Optgroups Example</label>
</div>
<button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>
MUI automatically styles input elements that use the HTML5 required attribute or <input type="email|url|tel">.
<form class="mui-form">
<legend>Title</legend>
<div class="mui-textfield">
<input type="text" required>
<label>Required Text Field</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="email" required>
<label>Required Email Address</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<textarea required></textarea>
<label>Required Textarea</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="email" value="Validation error">
<label>Email Address</label>
</div>
<button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>