Form

Text field

First Name

<p class="text">
  <label>
    <span>Text Field</span><br />
    <input type="text" />
  </label>
</p>

<p class="text">
  <label>
    <span>Email</span><br />
    <input type="email" placeholder="name@domain.com" />
  </label>
</p>

Discuss

<p class="text">
  <label>
    <span>Discuss</span><br />
    <textarea rows="6" cols="20" placeholder="What are your thoughts?"></textarea>
  </label>
</p>

Error

First Name
Please enter your first name.

<p class="text error">
  <label>
    <span>Text Field</span><br />
    <input type="text" name="first_name" />
  </label>
  <strong class="error-message">Please enter your first name.</strong>
</p>

Corrected error

First Name

<p class="text success">
  <label>
    <span>Text Field</span><br />
    <input type="text" value="Hayao" />
  </label>
</p>

Note

First Name This field is optional

<p class="text">
  <label>
    <span>Description <em>This field is optional</em></span><br />
    <input type="text" />
  </label>
</p>

Note (minor)

First Name Plain text please

<p class="text">
  <label>
    <span>Description <small>Plain text please</small></span><br />
    <input type="text" />
  </label>
</p>

Note (below)

First Name
Enter up to 50 characters

<p class="text">
  <label>
    <span>First Name</span><br />
    <input type="text" />
    <span class="note">Enter up to 50 characters</span>
  </label>
</p>

Checkbox

Yes, please send me an email

<p class="checkbox">
  <label>
    <input type="checkbox" checked="checked" />
    <span>Yes, please send me an email</span>
  </label>
</p>

Fieldset

GOOD Local Editions

San Francisco, California
Los Angeles, California
Chicago, Illinois

<fieldset>
  <legend>GOOD Local Editions</legend>
  …
</fieldset>

List with headlines

GOOD Newsletters

GOOD HQ Updates

Keeping you posted on the latest happenings at GOOD HQ
GOOD Digest

Choose a daily or weekly roundup of top links shared by GOOD members


<ul class="headlines">
  <li>
    <h3>
      <label>
        <input type="checkbox" />
        <span>GOOD HQ Updates</span>
      </label>
    </h3>
    <p class="note">Keeping you posted on the latest happenings at GOOD HQ</p>
  </li>
  <li>
    …
  </li>
</ul>

Submit

<p class="submit">
  <button type="submit">Submit</button>
</p>

Cancel

<ul class="submit">
  <li><button type="submit">Submit</button></li>
  <li><a href="…">Cancel</a></li>
</ul>

GOOD