Placeholder

<html class="supports-placeholder">
  …
  <form action="…" method="post">
    <p class="text">
      <label>
        <span>Field label</span><br />
        <input type="text" placeholder="Field label" />
      </label>
    </p>
      <p class="submit">
        <button>Submit</button>
      </p>
  </form>
  …
</html>

The “supports-placeholder" classname is added by JavaScript. It hints to the style sheet that it’s safe to hide the field label (since it’s often the same as the placeholder).

Field with Icon

<form action="…" method="post" class="has-icon">
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg>
      <span>Field label</span><br />
      <input type="text" placeholder="Field label" />
    </label>
  </p>
</form>

Multiline

<p class="text">
  <label>
    <span>Enter message (optional)</span><br />
    <textarea placeholder="Enter message (optional)"></textarea>
  </label>
</p>

Field Group

<ul class="text">
  <li>
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-envelope"></use></svg><span>Email</span><br />
      <input type="email" placeholder="Email" />
    </label>
  </li>
  <li>
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg><span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </li>
</ul>

Notes

<form action="…" method="post" class="has-icon">
  <p>Note about the whole form</p>
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-envelope"></use></svg><span>Email</span><br />
      <input type="email" placeholder="Email" />
    </label>
    <em class="note">Note with details about this field.</em>
  </p>
  <p class="text">
    <label>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-padlock"></use></svg><span>Password</span><br />
      <input type="password" placeholder="Password" />
    </label>
  </p>
  <p class="submit">
    <button>Send</button>
  </p>
</form>

Validation Error

<p class="text error">
  <label>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg><span>Field label</span><br />
    <input type="text" placeholder="Field label" />
  </label>
</p>
<p class="validation-message">
  Oops! There’s something wrong with this field.
</p>

Validation Success

<p class="text success">
  <label>
    <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-user"></use></svg><span>Field label</span><br />
    <input type="text" placeholder="Field label" />
  </label>
</p>