Forms

Text input

Form inputs should always (or almost always) be paired with a label element.

<label for="text">
  Text</label>
<input type="text" name="text" id="text">

Input with placeholder

Field placeholders should show an example of the expected input, such as suggested search terms or a demonstration of a correctly formatted email address.

<label for="email">
  E-mail</label>
<input type="email" name="email" id="email" placeholder="you@example.com">

No-nos

  • Don't use the placeholder attribute as a substitute for a label. It's a misuse of the attribute and leaves you with an inaccessible, unlabeled field.

Checkboxes

Checkboxes represent a set of options where multiple selections are allowed.

<label for="checkbox-1" class="mzp-u-inline">
  <input type="checkbox" name="checkboxes" id="checkbox-1"> Option 1
</label>
<label for="checkbox-2" class="mzp-u-inline">
  <input type="checkbox" name="checkboxes" id="checkbox-2"> Option 2
</label>

Tips

  • Wrap the label element around both the control and its text label. This gives a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.
  • Use a single checkbox for a binary choice (such as a yes or no question) rather than two radio buttons, especially if the field isn’t required. A checked radio button can’t be unchecked, whereas a single checkbox behaves as a switch to let a user toggle between the two states (you can uncheck a checked checkbox).

Radio Buttons

Radio buttons represent a set of options where only one may be selected.

<label for="radio-1" class="mzp-u-inline">
  <input type="radio" name="radios" id="radio-1"> Option 1
</label>
<label for="radio-2" class="mzp-u-inline">
  <input type="radio" name="radios" id="radio-2"> Option 2
</label>

Tips

  • Wrap the label element around both the control and its text label. This gives a bigger target for clicking.
  • Use the mzp-u-inline class to override the base block-level label styling.

Select

<label for="language">
  Language</label>
<select name="language" id="language">
  <option value="en-US">English (US)</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
  <option value="es-ES">Español</option>
  <option value="ja">日本語</option>
</select>

Textarea

<label for="textarea">
  Text area</label>
<textarea name="textarea" id="textarea" rows="3" cols="40"></textarea>

Fieldset with legend

Use fieldset to group related fields together. Include a legend as a title.

Log into your account
<fieldset>
  <legend>Log into your account</legend>
  <ul>
    <li>
      <label for="username">Username</label>
      <input type="text" id="username" name="username">
    </li>
    <li>
      <label for="password">Password</label>
      <input type="password" id="password" name="password">
    </li>
  </ul>
</fieldset>

Tips

  • Use meaningful elements like lists and paragraphs to give forms structure.

Field notes

A note to provide added context or instructions to supplement the field label. It should be inside the label element, after the label text.

Log into your account
<fieldset>
  <legend>Log into your account</legend>
  <ul>
    <li>
      <label for="username">
        Username
        <span class="mzp-c-fieldnote">Must be at least 6 characters.</span>
      </label>
      <input type="text" id="username" name="username">
    </li>
    <li>
      <label for="password">
        Password
        <span class="mzp-c-fieldnote">Must be at least 8 characters and contain at least one
          numeral. Passwords are case sensitive. This is an example
          of a pretty lengthy note.</span>
      </label>
      <input type="password" id="password" name="password">
    </li>
  </ul>
</fieldset>

Required field

Inputs that are required to submit the form should carry both the required and aria-required attributes and their labels should include a readable note.

<label for="email">
  E-mail
  <em class="mzp-c-fieldnote">Required</em>
</label>
<input type="email" name="email" id="email" placeholder="you@example.com">

Errors

  • inprogress

Display a summary list of form errors at the top of the form. Indicate individual field errors with the mzp-is-error class on the field’s parent element.

  • You must provide an e-mail address.
  • You must select a language.
  • Your username must be at least six characters.
  • You must accept the terms and conditions.

<div class="mzp-c-form-errors">
  <ul class="mzp-u-list-styled">
    <li>You must provide an e-mail address.</li>
    <li>You must select a language.</li>
    <li>Your username must be at least six characters.</li>
    <li>You must accept the terms and conditions.</li>
  </ul>
</div>

<fieldset>
  <p class="mzp-is-error">
    <label for="email">
      E-mail <em class="mzp-c-fieldnote">Required</em>
    </label>
    <input type="email" name="email" id="email" placeholder="you@example.com">
  </p>

  <p class="mzp-is-error">
    <label for="language">Language</label>
    <select name="language" id="language" required aria-required="true">
      <option value="">- select -</option>
      <option value="en-US">English (US)</option>
      <option value="de">Deutsch</option>
      <option value="fr">Français</option>
      <option value="es-ES">Español</option>
      <option value="ja">日本語</option>
    </select>
  </p>

  <ul>
    <li class="mzp-is-error">
      <label for="username">
        Username
        <span class="mzp-c-fieldnote">Must be at least 6 characters.</span>
      </label>
      <input type="text" id="username" name="username" value="bub">
    </li>
    <li>
      <label for="password">
        Password
        <span class="mzp-c-fieldnote">Must be at least 8 characters and contain at least one
          numeral. Passwords are case sensitive. This is an example
          of a pretty lengthy note.</span>
      </label>
      <input type="password" id="password" name="password">
    </li>
  </ul>

  <p class="mzp-is-error">
    <label for="accept" class="mzp-u-inline">
      <input type="checkbox" id="accept" name="accept" required aria-required="true"> I accept the terms and conditions.
    </label>
  </p>
</fieldset>

Notes

  • These colors are temporary; we'll update when we expand the palette in the very near future.

Tips

  • Error messages should be short and simple. They should indicate what the user needs to do to resolve the error, not simply state that an error occurred. Bad example: “Invalid e-mail.” Good example: “Provide a complete e-mail address, like ‘yourname@example.com’.”