Base by AppDirect

Forms

Help users add and edit data

Errors & Validation

Form Validation

Optional Labels

In general, we should aim to minimize both the total number of fields and the number of optional fields on a page or in a form. On a standard form, show "optional" labels for optional fields. Do not show "required" labels unless there are empty required fields upon submission. Single-option selectors such as dropdowns and radio selectors are required and should have default options selected.

Send a Message 

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Send a Message</legend>
    </h3>
    <div class="adb-form--field">
      <label for="label-optional-email">
        Email Address
      </label>
      <input id="label-optional-email" placeholder="email@address.com" type="email">
    </div>
    <div class="adb-form--field">
      <label for="label-optional-subject">
        Subject
        <span class="adb-label--status">optional</span>
      </label>
      <input id="label-optional-subject" type="text">
    </div>
    <div class="adb-form--field">
      <label for="label-optional-message">
        Message
      </label>
      <textarea id="label-optional-message"></textarea>
    </div>
    <div class="adb-form--field">
      <label for="label-optional-checkboxes">
        Recipients
        <span class="adb-label--status">optional</span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-optional-checkbox1">
        <span class="adb-selector--input">
          <input checked id="label-optional-checkbox1" name="label-optional-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Sales Department
        </span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-optional-checkbox2">
        <span class="adb-selector--input">
          <input id="label-optional-checkbox2" name="label-optional-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Engineering Department
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="label-optional-radios">
        Delivery Time
      </label>
      <label class="adb-selector adb-js-radio" for="label-optional-radio1">
        <span class="adb-selector--input">
          <input checked id="label-optional-radio1" name="label-optional-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Now
        </span>
      </label>
      <label class="adb-selector adb-js-radio" for="label-optional-radio2">
        <span class="adb-selector--input">
          <input id="label-optional-radio2" name="label-optional-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Later
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="label-optional-dropdown">
        Format
      </label>
      <div class="adb-js-dropdown adb-dropdown">
        <select id="label-optional-dropdown">
          <option>
            HTML
          </option>
          <option>
            Rich Text
          </option>
          <option>
            Plain Text
          </option>
        </select>
      </div>
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Send
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
</form>

Required Labels

For cases where we absolutely must show "required" labels for all required fields, do not show "optional" labels.

Send a Message 

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Send a Message</legend>
    </h3>
    <div class="adb-form--field">
      <label class="adb-label__required" for="label-required-email">
        Email Address
      </label>
      <input id="label-required-email" placeholder="email@address.com" type="email">
    </div>
    <div class="adb-form--field">
      <label for="label-required-subject">
        Subject
      </label>
      <input id="label-required-subject" type="text">
    </div>
    <div class="adb-form--field">
      <label class="adb-label__required" for="label-required-message">
        Message
      </label>
      <textarea id="label-required-message"></textarea>
    </div>
    <div class="adb-form--field">
      <label for="label-required-checkboxes">
        Recipients
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-required-checkbox1">
        <span class="adb-selector--input">
          <input checked id="label-required-checkbox1" name="label-required-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Sales Department
        </span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-required-checkbox2">
        <span class="adb-selector--input">
          <input id="label-required-checkbox2" name="label-required-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Engineering Department
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label class="adb-label__required" for="label-required-radios">
        Delivery Time
      </label>
      <label class="adb-selector adb-js-radio" for="label-required-radio1">
        <span class="adb-selector--input">
          <input checked id="label-required-radio1" name="label-required-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Now
        </span>
      </label>
      <label class="adb-selector adb-js-radio" for="label-required-radio2">
        <span class="adb-selector--input">
          <input id="label-required-radio2" name="label-required-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Later
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label class="adb-label__required" for="label-required-dropdown">
        Format
      </label>
      <div class="adb-js-dropdown adb-dropdown">
        <select id="label-required-dropdown">
          <option>
            HTML
          </option>
          <option>
            Rich Text
          </option>
          <option>
            Plain Text
          </option>
        </select>
      </div>
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Send
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
</form>

Error Labels

If a user submits a form without filling in a required field or submits the form with invalid data, they should see form fields with error states and explanatory error messages.

  • Error messages appear inline to the right of labels and above the field. This also applies to Form Dialogs.

Send a Message 

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Send a Message</legend>
    </h3>
    <div class="adb-form--field">
      <label for="error-default-email">
        Email Address
        <span class="adb-label--error">Please enter a valid email address.</span>
      </label>
      <input class="adb-is-error" id="error-default-email" type="email" value="blah.com">
    </div>
    <div class="adb-form--field">
      <label for="error-default-subject">
        Subject
        <span class="adb-label--status">optional</span>
      </label>
      <input id="error-default-subject" type="text">
    </div>
    <div class="adb-form--field">
      <label for="error-default-message">
        Message
        <span class="adb-label--error">Please write a message.</span>
      </label>
      <textarea class="adb-is-error" id="error-default-message"></textarea>
    </div>
    <div class="adb-form--field">
      <label for="error-default-checkboxes">
        Recipients
        <span class="adb-label--status">optional</span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="error-default-checkbox1">
        <span class="adb-selector--input">
          <input checked id="error-default-checkbox1" name="error-default-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Sales Department
        </span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="error-default-checkbox2">
        <span class="adb-selector--input">
          <input id="error-default-checkbox2" name="error-default-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Engineering Department
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="error-default-radios">
        Delivery Time
      </label>
      <label class="adb-selector adb-js-radio" for="error-default-radio1">
        <span class="adb-selector--input">
          <input checked id="error-default-radio1" name="error-default-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Now
        </span>
      </label>
      <label class="adb-selector adb-js-radio" for="error-default-radio2">
        <span class="adb-selector--input">
          <input id="error-default-radio2" name="error-default-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Later
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="error-default-dropdown">
        Format
      </label>
      <div class="adb-js-dropdown adb-dropdown">
        <select id="error-default-dropdown">
          <option>
            HTML
          </option>
          <option>
            Rich Text
          </option>
          <option>
            Plain Text
          </option>
        </select>
      </div>
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Send
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
</form>

Inline Validation

In some cases, inline validation can ease the task of filling in forms and facilitate valid data entry. This is especially relevant for Form Dialogs and Anchored Modals. Inline validation only applies for text input fields. You can add extra context with tooltips on the error icon.

Edit Information 

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Edit Information</legend>
    </h3>
    <div class="adb-form--field">
      <label for="error-inline-email">
        Email Address
      </label>
      <input class="adb-is-error" data-error="Invalid format:&lt;br&gt;digits only" data-toggle="tooltip" data-validate="error" id="error-inline-email" type="email" value="http://www.blah.com">
    </div>
    <div class="adb-form--field">
      <label for="error-inline-url">
        URL
      </label>
      <input data-validate="valid" id="error-inline-url" type="url" value="http://www.blah.com">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Save
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
</form>