Pattern Library

<form action="." method="POST">
  <div class="form_row">
    <label for="input_email">
      E-mail address
    </label>
    <div class="form_field">
      <input type="email"
             id="input_email"
             autocomplete="username"
             required>
    </div>
  </div>
  <div class="form_row">
    <label for="input_password">
      Password
    </label>
    <div class="form_field">
      <input type="password"
             id="input_password"
             autocomplete="password"
             required>
    </div>
  </div>
  <div class="form_row form_buttons">
    <button type="submit" data-scheme="primary">Log in</button>
  </div>
  <p>Not a customer yet? <a href=".">Sign up!</a></p>
</form>

• This pattern (organism) is made up of one or more form rows, as well as a modified form row for buttons.
• If your form includes any file uploads, be sure to use the enctype="multipart/form-data" attribute on the <form> element.

Pattern scope:

Organism – A superset of molecules and atoms, often includes behaviour

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/form.css

• Search form 

  A condensed form for soliciting search queries

  Example

  Open type in a new window

  Code sample

  <form class="form_search" action="#/search" method="GET">
    <div class="form_row">
      <label for="input_search" class="screenreader-only">Search</label>
      <div class="form_field">
        <input type="search" id="input_search" name="query" placeholder="Search" required>
      </div>
    </div>
    <div class="form_row form_buttons">
      <button type="submit" class="button" data-scheme="stripped" data-icon="search" data-mode="icon">Search</button>
    </div>
  </form>

• Look-up form 

  Integrate the submit button with a primary input field.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-mode="lookup-form">
    <form action="#step-2" method="GET">
      <div class="form_row">
        <label for="input_location">What’s your address?</label>
        <div class="form_field">
          <input type="search"
                name="location"
                id="input_location"
                data-icon="location"
                data-mode="icon-after"
                required>
        </div>
      </div>
      <div class="form_row form_buttons">
        <button type="submit"
                data-size="small"
                data-scheme="primary"
                data-icon="arrow-right"
                data-mode="icon-after">
          Get a quote!
        </button>
      </div>
    </form>
  </div>

  Notes

  • This variant is reliant on a parent (container) query. Be sure to only use this pattern inside the lookup-form container
  • You need to use a small-sized button in the form.
  • The form field is usually type="search"
  • This variant doesn't support help text for the form field