Forms

Basic example

Wrap form inputs in a .mui-textfield class to use MUI styling.

Title
<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>
View in new tab »

Fixed labels

Append a <label> element to a textfield to add a fixed label.

Title
<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>
View in new tab »

Floating labels

Use the .mui-textfield--float-label class to float labels.

Title
<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>
View in new tab »

Inline 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>
View in new tab »

Checkboxes and radio buttons

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="">
      Option one
    </label>
  </div>
  <div class="mui-checkbox">
    <label>
      <input type="checkbox" value="" disabled>
      Option two 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>
View in new tab »

Select boxes

Wrap select elements in a div with class .mui-select.

Title
<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>
View in new tab »

Form Validation

MUI automatically styles input elements that use the HTML5 required attribute or <input type="email|url|tel">.

Title
<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>
View in new tab »
« Previous Next »