Form

Overview

Most form elements have 5 different states: Default, On focus, Validated, Error and Inactive.

Text fields with additional instruction

Usage

Under the text input box, you can add additional instruction to help users understand the criteria for filling out the form.

Additional instruction caption

<label for="testInput" class="am-input__label">Label for field</label>
<div class="am-input-text">
  <input id="testInput" class="am-input-text__field" type="text" name="input1" placeholder="">
  <div class="am-input-text__icon"></div>
</div>
<p class="am-caption">Additional instruction caption</p>

Additional instruction caption

<label for="testInput" class="am-input__label">Success Field</label>
<div class="am-input-text am-input-text--success">
  <input id="testInput" class="am-input-text__field" type="text" name="" value="Some valid info" placeholder="">
  <div class="am-input-text__icon">
    <span class="am-icon am-icon-checkmark"></span>
  </div>
</div>
<p class="am-caption">Additional instruction caption</p>
Error bubble message

Additional instruction caption

<label for="testInput" class="am-input__label">Error Field</label>
<div class="am-input-text am-input-text--error">
  <input id="testInput" class="am-input-text__field" type="text" name="" value="Invalid info" placeholder="">
  <div class="am-input-text__icon">
    <span class="am-icon am-icon-functional-secondary-close"></span>
  </div>
  <div class="am-bubble am-bubble--error am-bubble--right">
    Error bubble message
  </div>
</div>
<p class="am-caption">Additional instruction caption</p>

Text fields with placeholder text

Usage

Placeholder text is instructional copy that lives inside of input box, that provides an example on formatting.

Additional instruction caption

<label for="testInput" class="am-input__label">Label for field</label>
<div class="am-input-text">
  <input id="testInput" class="am-input-text__field" type="text" name="" value="" placeholder="Placeholder text (MMDDYYYY)">
  <div class="am-input-text__icon"></div>
</div>
<p class="am-caption">Additional instruction caption</p>

In order to keep dropdowns functional across all browsers, leverage the browser's built-in capability instead of creating a custom pattern.

<label for="testDropdown" class="am-input__label">Dropdown</label>
<div class="am-input-dropdown">
  <select name="testing" id="testDropdown" class="am-input-dropdown__field am-input-text__field">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
Error bubble message
<label for="testDropdown" class="am-input__label">Dropdown error</label>
<div class="am-input-dropdown am-input-dropdown--error">
  <select name="testing" id="testDropdown" class="am-input-dropdown__field am-input-text__field">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div class="am-bubble am-bubble--error am-bubble--right am-bubble--visible">Error bubble message</div>
</div>

Radio button

Use radio buttons when only one item can be selected from a list of items.

<div class="am-form-group">
  <label class="am-input__label">
    Radio buttons
  </label>
  <label for="radio-default-1" class="am-radio">
    <input class="am-radio__input" type="radio" name="radio-default" id="radio-default-1">
    <div class="am-radio__circle"></div>
    <p class="am-radio__text">
      Option A
    </p>
  </label>
  <label for="radio-default-2" class="am-radio">
    <input class="am-radio__input" type="radio" name="radio-default" id="radio-default-2">
    <div class="am-radio__circle"></div>
    <p class="am-radio__text">
      Option B
    </p>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
  Radio button with error
  </label>
  <label for="radio-error-1" class="am-radio am-radio--error">
    <input class="am-radio__input" type="radio" name="radio-error" id="radio-error-1">
    <div class="am-radio__circle am-radio__circle"></div>
    <p class="am-radio__text">
      Error state
    </p>
    <div class="am-bubble am-bubble--error am-bubble--left">Radio button error message</div>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
    Disabled radio button
  </label>
  <label for="radio-disabled" class="am-radio">
    <input class="am-radio__input" type="radio" name="radio-disabled" id="radio-disabled-1" disabled>
    <div class="am-radio__circle"></div>
    <p class="am-radio__text">
      Disabled state
    </p>
  </label>
</div>


Checkbox

Use check boxes when one or more items can be selected at the same time.

<div class="am-form-group">
  <label class="am-input__label">
    Checkbox field
  </label>
  <label for="checkbox-default" class="am-checkbox">
    <input class="am-checkbox__input" type="checkbox" id="checkbox-default">
    <div class="am-checkbox__box"></div>
    <p class="am-checkbox__text">
      Checkbox text
    </p>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
    Checkbox field with a caption
  </label>
  <label for="checkbox-caption" class="am-checkbox">
    <input class="am-checkbox__input" type="checkbox" id="checkbox-caption">
    <div class="am-checkbox__box"></div>
    <p class="am-checkbox__text">
      Checkbox text
      <span class="am-caption">
        Additional checkbox explanation. <strong>Additional emphasized information.</strong>
      </span>
    </p>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
  Checkbox with error
  </label>
  <label for="checkbox-error" class="am-checkbox am-checkbox--error">
    <input class="am-checkbox__input" type="checkbox" id="checkbox-error">
    <div class="am-checkbox__box am-checkbox__box"></div>
    <p class="am-checkbox__text">
      Checkbox
      <span class="am-caption">
        Additional checkbox text. <strong>Additional emphasized
        additional emphasized checkbox text.</strong>
      </span>
    </p>
    <div class="am-bubble am-bubble--error am-bubble--left">Checkbox error message</div>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
    Disabled checkbox field
  </label>
  <label for="checkbox-disabled" class="am-checkbox">
    <input class="am-checkbox__input" type="checkbox" id="checkbox-disabled" disabled="">
    <div class="am-checkbox__box"></div>
    <p class="am-checkbox__text">
      Checkbox
    <span class="am-caption">
        Additional checkbox text additional checkbox text additional checkbox text additional checkbox
        text additional checkbox text additional checkbox text additional checkbox text additional
        checkbox text. <strong>Additional emphasized checkbox text additional emphasized checkbox text
        additional emphasized checkbox text.</strong>
      </span>
    </p>
  </label>
</div>

<div class="am-form-group">
  <label class="am-input__label">
    Checkbox field (small)
  </label>
  <label for="checkbox-small" class="am-checkbox am-checkbox--small">
    <input class="am-checkbox__input" type="checkbox" id="checkbox-small">
    <div class="am-checkbox__box"></div>
    <p class="am-checkbox__text">
      Checkbox text
    </p>
  </label>
</div>

Contextual help (W.I.P.)

Contextual help works as an overlay that provides a small amount of contextual information. Clicking outside of box area hides tooltip box. The call to action button can be placed with a form title or a form label field.

Example of a info bubble button
Contextual help text. Contextual help text.
<!-- The parent container must be relatively positioned -->
<div class="am-bubble__info-container">
  <button class="am-icon-button am-icon-button--info-bubble">?</button>
  <div class="am-bubble am-bubble--info am-bubble--center">Contextual help text. Contextual help text.</div>
</div>

Spacing between form elements

There are 3 types of spacing between form elements: the standard space between a group of related form elements, a small space between elements that stack more closely together, and the space between different form sections.

Form Group Example

Additional instruction caption

Additional instruction caption

<div class="am-form-group">
  <label for="name-input" class="am-input__label">Name</label>
  <div class="am-input-text">
    <input id="name-input" class="am-input-text__field" type="text" name="name-input" placeholder="">
  </div>
  <p class="am-caption">Additional instruction caption</p>
</div>

<div class="am-form-group">
  <label for="occupation-input" class="am-input__label">Occupation</label>
  <div class="am-input-text">
    <input id="occupation-input" class="am-input-text__field" type="text" name="occupation-input" placeholder="">
  </div>
  <p class="am-caption">Additional instruction caption</p>
</div>

Small form group example

The small variation of the form group is used when fields are closely related and need to stack close together.

<label class="am-input__label">Please list all attendees</label>
<div class="am-form-group--small">
  <div class="am-input-text">
    <input id="name-input" class="am-input-text__field" type="text" name="name-input" placeholder="">
  </div>
</div>

<div class="am-form-group--small">
  <div class="am-input-text">
    <input id="occupation-input" class="am-input-text__field" type="text" name="occupation-input" placeholder="">
  </div>
</div>

Form section example

The form sections are used to break up unrelated form fields into different subsections.

Person 1 Details

Please enter your full name

Please put your official title

Person 2 Details

Please enter your full name

<div class="am-form-group--section">
  <h5>Person 1 Details</h5><br>
  <div class="am-form-group">
    <label for="name-input" class="am-input__label">Name</label>
      <div class="am-input-text">
        <input id="name-input" class="am-input-text__field" type="text" name="name-input" placeholder="">
      </div>
      <p class="am-caption">Please enter your full name</p>
  </div>
  <div class="am-form-group">
    <label for="occupation-input" class="am-input__label">Occupation</label>
      <div class="am-input-text">
        <input id="occupation-input" class="am-input-text__field" type="text" name="occupation-input" placeholder="">
      </div>
      <p class="am-caption">Please put your official title</p>
  </div>
</div>

<div class="am-form-group--section">
  <h5>Person 2 Details</h5>
  <div class="am-form-group">
    <label for="name-input-2" class="am-input__label">Name</label>
      <div class="am-input-text">
        <input id="name-input-2" class="am-input-text__field" type="text" name="name-input" placeholder="">
      </div>
      <p class="am-caption">Please enter your full name</p>
  </div>
  <div class="am-form-group">
    <label for="occupation-input-2" class="am-input__label">Occupation</label>
      <div class="am-input-text">
        <input id="occupation-input-2" class="am-input-text__field" type="text" name="occupation-input" placeholder="">
      </div>
  </div>
</div>