Forms

Form controls and validation patterns using built-in input components.

Form convention

Build every form with the McGowanStyle form structure so fields, help text, and validation states stay consistent.

Start with <form class="ms-form">.
Group side-by-side fields in an ms-form-row.
Each field is an ms-field = ms-label + ms-input (add ms-input--invalid on error) + ms-form-help (add ms-form-help--danger on error).
The submit control is an ms-field containing a button.ms-btn.ms-btn--primary.

<form class="ms-form">
  <div class="ms-form-row">
    <div class="ms-field">
      <label class="ms-label" for="first">First name</label>
      <input id="first" class="ms-input" type="text">
      <div class="ms-form-help">As it appears on your ID.</div>
    </div>
    <div class="ms-field">
      <label class="ms-label" for="last">Last name</label>
      <input id="last" class="ms-input ms-input--invalid" type="text" aria-invalid="true">
      <div class="ms-form-help ms-form-help--danger">This field is required.</div>
    </div>
  </div>
  <div class="ms-field">
    <button class="ms-btn ms-btn--primary" type="submit">Submit</button>
  </div>
</form>

Basic form

<label for="name">Name</label>
<input class="ms-input" id="name" type="text" placeholder="Full name">

Horizontal / inline form

Validation states

Select and grouped controls

Login form

<form>
  <label for="login-email">Email</label>
  <input id="login-email" class="ms-input" type="email" required>

  <label for="login-password">Password</label>
  <input id="login-password" class="ms-input" type="password" required>

  <button class="ms-btn ms-btn--primary" type="submit">Sign in</button>
</form>

Registration form

<form>
  <div class="ms-form-row">
    <div class="ms-field">
      <label for="reg-first">First name</label>
      <input id="reg-first" class="ms-input" type="text" required>
    </div>
    <div class="ms-field">
      <label for="reg-last">Last name</label>
      <input id="reg-last" class="ms-input" type="text" required>
    </div>
  </div>

  <label for="reg-email">Email</label>
  <input id="reg-email" class="ms-input" type="email" required>

  <div class="ms-form-row">
    <div class="ms-field">
      <label for="reg-password">Password</label>
      <input id="reg-password" class="ms-input" type="password" required>
    </div>
    <div class="ms-field">
      <label for="reg-password-confirm">Confirm</label>
      <input id="reg-password-confirm" class="ms-input" type="password" required>
    </div>
  </div>

  <label><input type="checkbox"> I agree to the terms</label>
  <button class="ms-btn ms-btn--primary" type="submit">Create account</button>
</form>

Contact form

<form>
  <label for="contact-name">Name</label>
  <input id="contact-name" class="ms-input" type="text">

  <label for="contact-email">Email</label>
  <input id="contact-email" class="ms-input" type="email">

  <label for="contact-message">Message</label>
  <textarea id="contact-message" class="ms-input ms-input--full" rows="5"></textarea>

  <button class="ms-btn ms-btn--primary" type="submit">Send message</button>
</form>