Forms

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

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>