Pattern Library

<div class="form_row">
  <label for="input_organisation">Organisation</label>
  <div class="form_field">
    <input type="text"
           name="organisation"
           id="input_organisation"
           aria-describedby="input_organisation_help"
           autocomplete="organization"
           required>
  </div>
  <em class="form_field_help_text" id="input_organisation_help">
    This value will appear on your invoice
  </em>
</div>

• This element is designed to have one main label with a matching form field.
• If there's a one to one relationship between the label and its field, then the <label> element needs a for attribute. This attribute value must use the id value of the <input> or form field. Doing so will associate the control with this label, as well as allowing the user to click the label.
• If there are more than one fields such as an array of checkboxes (or radios) then the main label doesn't need a for attribute.
• If you add any optional help text, make sure to use the help text element's ID in the field's aria-describedby attribute.
• For more detail on the various controls contained by the .form_field element see form fields.

Pattern scope:

Molecule – A combination of disparate Atoms

Design source:

Figma

Relevant assets:

Stylesheets:

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

• Status: Success 

  If the field validations / conditions have been met.

  Example

  Open type in a new window

  Code sample

  <div class="form_row" data-status="success">
    <label for="input_organisation">Organisation</label>
    <div class="form_field">
      <input type="text"
             name="organisation"
             id="input_organisation"
             aria-describedby="input_organisation_help"
             autocomplete="organization"
             required>
    </div>
    <em class="form_field_status_text">
      Thanks, nice name.
    </em>
    <em class="form_field_help_text" id="input_organisation_help">
      This value will appear on your invoice
    </em>
  </div>

  Notes

  • The .form_field_status_text element in this example is optional.
  • Be sure to include any status text before any existing help text
• Status: Error 

  If the field validations / conditions haven't been met

  Example

  Open type in a new window

  Code sample

  <div class="form_row" data-status="error">
    <label for="input_organisation">Organisation</label>
    <div class="form_field">
      <input type="text"
             name="organisation"
             id="input_organisation"
             aria-invalid="true"
             aria-describedby="input_organisation_error input_organisation_help"
             autocomplete="organization"
             required>
    </div>
    <em class="form_field_status_text" id="input_organisation_error">
      This field is required
    </em>
    <em class="form_field_help_text" id="input_organisation_help">
      This value will appear on your invoice
    </em>
  </div>

  Notes

  • You must include the .form_field_status_text element, to help explain what's wrong with the given input.
  • Be sure to include any status text before any existing help text
  • Mark the field as invalid using ara-invalid="true"
  • Add the error message element's ID to the aria-describedby attribute.
• Button row 

  The last row in a form, acts as a marked container for buttons

  Example

  Open type in a new window

  Code sample

  <div class="form_row form_buttons">
    <button type="submit" name="action" value="submit" data-scheme="primary">
      Submit
    </button>
    <button type="submit" name="action" value="save" data-scheme="secondary">
      Save for later
    </button>
    <a href=".">Cancel</a>
  </div>

  Notes

  • Ideally you should only have one button or action at the end of the form
  • If you need multiple submit buttons, then add the name and value attributes as shown below. Then interpret the value on receiving this form data.
  • Any cancel actions should be links
• Button row (Alternate alignment) 

  Solitary buttons can use alternate alignment if necessary

  Example

  Open type in a new window

  Code sample

  <div class="form_row form_buttons" data-mode="alternate">
    <button type="submit" name="action" value="submit" data-scheme="primary">
      Submit
    </button>
  </div>