Forms

Basic Form

<form>
  <label>Name <input type="text" placeholder="Jane Doe"></label>
  <label>Email <input type="email" placeholder="jane@example.com"></label>
  <label>Bio <textarea></textarea></label>
  <label>
    Role
    <select>
      <option>Developer</option>
    </select>
  </label>
  <label><input type="checkbox"> Subscribe</label>
  <button>Submit</button>
</form>

Validation States

<form>
  <label>
    Username
    <input type="text" aria-invalid="true">
    <small class="error">This username is already taken</small>
  </label>
  <label>
    Password
    <input type="password" aria-invalid="true">
    <small class="error">Password must be at least 8 characters</small>
  </label>
  <button class="error">Submit</button>
</form>

Button Styles

Use semantic classes to change button appearance:

<button>Default</button>
<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>
<button class="ghost">Ghost</button>

Kitchen Sink Form

A full form combining all the above elements into a realistic layout.