Pattern Library

<div class="form_group">
  <div class="form_row">
    <label for="input_phone">Phone number</label>
    <div class="form_field">
      <input type="tel"
            name="phone"
            id="input_phone"
            autocomplete="telephone"
            required>
    </div>
  </div>
  <div class="form_row">
    <label for="input_email">Email address</label>
    <div class="form_field">
      <input type="email"
            name="email"
            id="input_email"
            autocomplete="email-address"
            required>
    </div>
  </div>
</div>

• This pattern wraps around several form row patterns
• This pattern is mostly used to group similar or related fields in a long form.
• If you use several .form_group elements in a form, then a gap will be added between them.

Pattern scope:

Molecule – A combination of disparate Atoms

Relevant assets:

Stylesheets:

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