Form Layout

General Guidelines

Include <legend> for each <fieldset> even if you have to apply .visuallyhidden class.
Use <label> to label every form field, especially for radio and checkbox selectors. Couple <label> with <input> tags with for attribute.
Set default options for radio and checkbox selectors.
Use <fieldset> and <optgroup> to organize input fields and options
Use placeholder attribute to give the user hints about input format or content. Do not use value attribute.

<form action="" class="adb-form">
  <fieldset>
    <h3>
      <legend>Sign up</legend>
    </h3>
    <div class="adb-form--field">
      <label for="input-name">
        Name
      </label>
      <input id="input-name" placeholder="e.g., Albert Einstein" type="text">
    </div>
    <div class="adb-form--field">
      <label for="input-email">
        Email Address
      </label>
      <input id="input-email" placeholder="email@address.com" type="email">
    </div>
  </fieldset>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="submit">
      Sign up
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
</form>

Contained Set of Fields

In the event that a form contains numerous inputs, organize related sets of fields within containers.

Reviews & Questions

Purchase Required A customer must purchase a product in order to review it

If checked, customers will see messaging that the product must be purchased in order to be reviewed.

Questions Hide "Questions" content for all products

User Content Manually approve all user posts to the marketplace

All user generated content such as reviews, questions, comments, etc need to be approved by a Marketplace Administrator before they are published.

<form class="adb-form">
  <fieldset class="adb-container">
    <div class="adb-container_header">
      <h3 class="adb-container_header--title adb-container_header--item">
        <legend>Reviews &amp; Questions</legend>
      </h3>
    </div>
    <div class="adb-container_content">
      <div class="adb-form--field">
        <label>Purchase Required</label>
        <label class="adb-selector adb-js-checkbox" for="purchase-required">
          <span class="adb-selector--input">
            <input checked id="purchase-required" name="purchase-required" type="checkbox">
          </span>
          <span class="adb-selector--value">
            A customer must purchase a product in order to review it
          </span>
        </label>
        <div class="adb-caption adb-form--caption">
          If checked, customers will see messaging that the product must be purchased in order to be reviewed.
        </div>
      </div>
      <div class="adb-form--field">
        <label>Questions</label>
        <label class="adb-selector adb-js-checkbox" for="questions">
          <span class="adb-selector--input">
            <input checked id="questions" name="questions" type="checkbox">
          </span>
          <span class="adb-selector--value">Hide "Questions" content for all products</span>
        </label>
      </div>
      <div class="adb-form--field">
        <label>User Content</label>
        <label class="adb-selector adb-js-checkbox" for="user-content">
          <span class="adb-selector--input">
            <input checked id="user-content" name="user-content" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Manually approve all user posts to the marketplace
          </span>
        </label>
        <div class="adb-caption adb-form--caption">
          All user generated content such as reviews, questions, comments, etc need to be approved by a Marketplace Administrator before they are published.
        </div>
      </div>
    </div>
  </fieldset>
</form>

Inline Fields

Shipping Information

Billing Address

City

State

Country

<div class="adb-form--field adb-form--field__xlarge">
  <label for="address-street">Billing Address</label>
  <div class="adb-form--inline_inputs">
    <input class="adb-form--inline_input" id="address-street" name="address-street" placeholder="1234 Main St." type="text">
    <input class="adb-form--inline_input" name="address-street2" placeholder="Apt. 5" type="text">
  </div>
</div>
<div class="adb-form--inline_fields">
  <div class="adb-form--inline_field">
    <label for="address-city">City</label>
    <input id="address-city" name="address-city" placeholder="San Francisco" type="text">
  </div>
  <div class="adb-form--inline_field">
    <label for="address-state">State</label>
    <div class="adb-js-dropdown adb-dropdown">
      <select id="address-state" name="address-state">
        <option>AL</option>
        <option>DL</option>
        <option selected>CA</option>
      </select>
    </div>
  </div>
</div>
<div class="adb-form--field adb-form--field__xlarge">
  <label for="address-country">Country</label>
  <div class="adb-js-dropdown adb-dropdown">
    <select id="address-country" name="address-country">
      <option>Armenia</option>
      <option>Canada</option>
      <option selected>United States</option>
    </select>
  </div>
</div>

Billing Information

Credit Card Number

Expiration Date

Credit Card Owner

Enter the name exactly as it appears on card.

Security Code

<div class="adb-form--inline_fields">
  <div class="adb-form--inline_field">
    <label for="credit-number">Credit Card Number</label>
    <div class="adb-input_row adb-js-input_row">
      <div class="adb-input_row--item adb-input_row--primary">
        <input class="adb-input_row--item_content" id="credit-number" name="credit-number" placeholder="1234-2345-3456-4567" type="text" value="4111-1111-1111-1111">
      </div>
      <div class="adb-input_row--item adb-input_row--label">
        <span class="adb-input_row--item_content adb-form--credit_cards">
          <img class="adb-form--credit_card" src="../../images/assets/visa.svg?1567620427" />
        </span>
      </div>
    </div>
  </div>
  <div class="adb-form--inline_field">
    <label for="credit-expiration">Expiration Date</label>
    <input id="credit-expiration" name="credit-expiration" type="date">
  </div>
</div>
<div class="adb-form--inline_fields">
  <div class="adb-form--inline_field">
    <label for="credit-name">Credit Card Owner</label>
    <input id="credit-name" name="credit-name" placeholder="Full Name" type="text">
    <div class="adb-form--caption">
      Enter the name exactly as it appears on card.
    </div>
  </div>
  <div class="adb-form--inline_field">
    <label for="credit-security">
      Security Code
    </label>
    <input class="adb-text__number" id="credit-security" name="credit-security" placeholder="XXX" type="text">
    <span class="adb-affix" data-toggle="dialog">
      <img height="36px" src="../../images/assets/card-security.png?1567620427" />
    </span>
    <div class="adb-complex_tooltip adb-js-dialog">
      <div class="adb-complex_tooltip--content">
        The security code is the last 3 digits on the back of your credit card.
      </div>
    </div>
  </div>
</div>

USD

CAD

EUR

CHF

SEK

<div class="adb-form--inline_fields">
  <div class="adb-form--inline_field">
    <label class="adb-subtitle">USD</label>
    <input min="0" placeholder="0.00" step="any" type="number">
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle">CAD</label>
    <input min="0" placeholder="0.00" step="any" type="number">
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle">EUR</label>
    <input min="0" placeholder="0.00" step="any" type="number">
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle">CHF</label>
    <input min="0" placeholder="0.00" step="any" type="number">
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle">SEK</label>
    <input min="0" placeholder="0.00" step="any" type="number">
  </div>
</div>

Vendor +

Marketplace +

AppDirect = 100 %

<div class="adb-form--inline_fields">
  <div class="adb-form--inline_field">
    <label class="adb-subtitle" for="vendor-share">Vendor</label>
    <input id="vendor-share" min="0" placeholder="0" step="any" type="number">
    <span class="adb-affix">&nbsp;+</span>
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle" for="marketplace-share">Marketplace</label>
    <input id="marketplace-share" min="0" placeholder="0" step="any" type="number">
    <span class="adb-affix">&nbsp;+</span>
  </div>
  <div class="adb-form--inline_field">
    <label class="adb-subtitle" for="appdirect-share">AppDirect</label>
    <input id="appdirect-share" min="0" placeholder="0" step="any" type="number">
    <span class="adb-affix">= 100 %</span>
  </div>
</div>

Input Rows

http://

<div class="adb-input_row adb-js-input_row">
  <div class="adb-input_row--item adb-input_row--label">
    <label class="adb-input_row--item_content" for="company-url4">http://</label>
  </div>
  <div class="adb-input_row--item adb-input_row--primary">
    <input class="adb-input_row--item_content" id="company-url4" placeholder="www.company.com" type="url">
  </div>
</div>

@address.com

<div class="adb-input_row adb-js-input_row">
  <div class="adb-input_row--item adb-input_row--primary">
    <input class="adb-input_row--item_content" id="company-email" placeholder="email" type="email">
  </div>
  <div class="adb-input_row--item adb-input_row--label">
    <label class="adb-input_row--item_content" for="company-email">@address.com</label>
  </div>
</div>

Sizes

Input Row

Input Row with Dropdown Selector

<form class="adb-form">
  <fieldset>
    <h4>
      <legend>Input Row</legend>
    </h4>
    <div class="adb-form--field adb-input_row adb-js-input_row">
      <div class="adb-input_row--item adb-input_row--primary">
        <input class="adb-input_row--item_content" type="text">
      </div>
      <div class="adb-input_row--item">
        <button class="adb-input_row--item_content" type="submit">Submit</button>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <h4>
      <legend>Input Row with Dropdown Selector</legend>
    </h4>
    <div class="adb-form--field adb-input_row adb-js-input_row">
      <div class="adb-input_row--item">
        <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset">
          <select>
            <option>All Categories</option>
            <option>Lorem ipsum category</option>
            <option>Lorem ipsum category</option>
          </select>
        </div>
      </div>
      <div class="adb-input_row--item adb-input_row--primary">
        <input class="adb-input_row--item_content" type="text">
      </div>
      <div class="adb-input_row--item">
        <button class="adb-input_row--item_content" type="submit">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

Input Row

Input Row with Dropdown Selector

<form class="adb-form">
  <fieldset>
    <h4>
      <legend>Input Row</legend>
    </h4>
    <div class="adb-form--field">
      <div class="adb-input_row adb-input_row__full_width adb-js-input_row">
        <div class="adb-input_row--item adb-input_row--primary">
          <input class="adb-input_row--item_content" type="text">
        </div>
        <div class="adb-input_row--item">
          <button class="adb-input_row--item_content" type="submit">Submit</button>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <h4>
      <legend>Input Row with Dropdown Selector</legend>
    </h4>
    <div class="adb-form--field">
      <div class="adb-input_row adb-input_row__full_width adb-js-input_row">
        <div class="adb-input_row--item">
          <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset">
            <select>
              <option>All Categories</option>
              <option>Lorem ipsum category</option>
              <option>Lorem ipsum category</option>
            </select>
          </div>
        </div>
        <div class="adb-input_row--item adb-input_row--primary">
          <input class="adb-input_row--item_content" type="text">
        </div>
        <div class="adb-input_row--item">
          <button class="adb-input_row--item_content" type="submit">Submit</button>
        </div>
      </div>
    </div>
  </fieldset>
</form>

States

http://

<div class="adb-input_row adb-js-input_row">
  <div class="adb-input_row--item adb-input_row--label">
    <label class="adb-input_row--item_content" for="company-url1">http://</label>
  </div>
  <div class="adb-input_row--item adb-input_row--primary">
    <input class="adb-input_row--item_content" id="company-url1" placeholder="company.com" type="url">
  </div>
</div>

http://

<div class="adb-input_row adb-js-input_row adb-is-error">
  <div class="adb-input_row--item adb-input_row--label">
    <label class="adb-input_row--item_content" for="company-url3">http://</label>
  </div>
  <div class="adb-input_row--item adb-input_row--primary">
    <input class="adb-input_row--item_content" id="company-url3" placeholder="company.com" type="url">
  </div>
</div>

http://

<div class="adb-input_row adb-js-input_row">
  <div class="adb-input_row--item adb-input_row--label">
    <label class="adb-input_row--item_content" for="company-url2">http://</label>
  </div>
  <div class="adb-input_row--item adb-input_row--primary">
    <input class="adb-input_row--item_content" disabled id="company-url2" placeholder="company.com" type="url">
  </div>
</div>

Input Tables

<div class="adb-input_table">
  <table>
    <tbody>
      <tr>
        <td class="adb-input_table--primary">
          <input disabled type="email" value="ben.domanico@appdirect.com">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select disabled>
              <option>Primary Email</option>
            </select>
          </div>
        </td>
        <td></td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <input placeholder="email@address.com" type="email" value="ben@gmail.com">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Personal</option>
              <option>Work</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <input placeholder="email@address.com" type="email">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Personal</option>
              <option>Work</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="adb-button__small adb-button__secondary" type="button">
    <i class="adb-icon__add"></i>
    Add Email Address
  </button>
</div>

<div class="adb-input_table adb-input_table__full_width">
  <table>
    <colgroup>
      <col width="60%">
      <col width="40%">
      <col>
    </colgroup>
    <tbody>
      <tr>
        <td class="adb-input_table--primary">
          <input class="adb-input_table--content" disabled type="email" value="ben.domanico@appdirect.com">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select disabled>
              <option>Primary Email</option>
            </select>
          </div>
        </td>
        <td></td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <input class="adb-input_table--content" placeholder="email@address.com" type="email" value="ben@gmail.com">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Personal</option>
              <option>Work</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <input class="adb-input_table--content" placeholder="email@address.com" type="email">
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Personal</option>
              <option>Work</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="adb-button__small adb-button__secondary" type="button">
    <i class="adb-icon__add"></i>
    Add Email Address
  </button>
</div>

Input Table with Upload Fields

<div class="adb-input_table adb-input_table__full_width">
  <table>
    <colgroup>
      <col width="60%">
      <col width="40%">
      <col>
    </colgroup>
    <tbody>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td class="adb-input_table--primary">
          <div class="adb-upload adb-input_table--content">
            <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
            <button class="adb-upload--select">
              <input type="file">
              <span class="adb-upload--button_text">Choose File</span>
            </button>
          </div>
        </td>
        <td>
          <div class="adb-js-dropdown adb-dropdown adb-input_table--content">
            <select>
              <option>Category</option>
              <option>Category</option>
            </select>
          </div>
        </td>
        <td>
          <button class="adb-button__square adb-button__secret" type="button">
            <i class="adb-icon__trash"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="adb-button__small adb-button__secondary" type="button">
    <i class="adb-icon__add"></i>
    Add Category
  </button>
</div>

Nested Fields

Redeem Method Apply automatically

If applied automatically, customers will see a 'discount available' flag on the product in the marketplace while the discount is valid. Discount codes are not made public on the marketplace.

Enter code at checkout

The discount code can be any unique combination of letters and numbers.

Enter a single code

Generate multiple random codes

Number of random codes

The number of random codes that will be generated based on these settings (1-999).

Upload a file containing your discount codes

Upload file

Drag and drop file here, or click here to upload.

Upload a text file of up to 999 discount codes. Each code should be on its own line

URL

http://

<div class="adb-form--field">
  <label class="adb-label__required" for="how-redeem">
    Redeem Method
  </label>
  <label class="adb-selector adb-js-radio" for="how-redeem-1">
    <span class="adb-selector--input">
      <input checked data-toggle="panel" id="how-redeem-1" name="how-redeem" type="radio" value="#redeem-method1">
    </span>
    <span class="adb-selector--value">
      Apply automatically
    </span>
  </label>
  <div class="adb-caption adb-form--caption">
    If applied automatically, customers will see a 'discount available' flag on the product in the marketplace while the discount is valid. Discount codes are not made public on the marketplace.
  </div>
  <div class="adb-js-panel-target adb-is-active" id="redeem-method1"></div>
  <label class="adb-selector adb-js-radio" for="how-redeem-2">
    <span class="adb-selector--input">
      <input data-toggle="panel" id="how-redeem-2" name="how-redeem" type="radio" value="#redeem-method2">
    </span>
    <span class="adb-selector--value">
      Enter code at checkout
    </span>
  </label>
  <div class="adb-caption adb-form--caption">
    The discount code can be any unique combination of letters and numbers.
  </div>
  <div class="adb-js-panel-target adb-form--nested_fields" id="redeem-method2">
    <div class="adb-form--field">
      <label class="adb-selector adb-js-radio" for="code-options-1">
        <span class="adb-selector--input">
          <input checked data-toggle="panel" id="code-options-1" name="code-options" type="radio" value="#redeem-method-code1">
        </span>
        <span class="adb-selector--value">
          Enter a single code
        </span>
      </label>
      <div class="adb-js-panel-target adb-form--nested_fields adb-is-active" id="redeem-method-code1">
        <div class="adb-form--field">
          <label class="adb-label__required" for="single-code">
            Enter a single code
          </label>
          <input id="single-code" name="single-code" type="text">
        </div>
      </div>
      <label class="adb-selector adb-js-radio" for="code-options-2">
        <span class="adb-selector--input">
          <input data-toggle="panel" id="code-options-2" name="code-options" type="radio" value="#redeem-method-code2">
        </span>
        <span class="adb-selector--value">
          Generate multiple random codes
        </span>
      </label>
      <div class="adb-js-panel-target adb-form--nested_fields" id="redeem-method-code2">
        <div class="adb-form--field">
          <label class="adb-label__required" for="rand-code">
            Number of random codes
          </label>
          <input id="rand-code" min="0" name="rand-code" type="number">
          <div class="adb-caption adb-form--caption">
            The number of random codes that will be generated based on these settings (1-999).
          </div>
        </div>
      </div>
      <label class="adb-selector adb-js-radio" for="code-options-3">
        <span class="adb-selector--input">
          <input data-toggle="panel" id="code-options-3" name="code-options" type="radio" value="#redeem-method-code3">
        </span>
        <span class="adb-selector--value">
          Upload a file containing your discount codes
        </span>
      </label>
      <div class="adb-js-panel-target adb-form--nested_fields" id="redeem-method-code3">
        <div class="adb-form--field">
          <label class="adb-label__required">
            Upload file
          </label>
          <div class="adb-upload_field">
            <span class="adb-upload_field--text">
              <i class="adb-upload_field--icon"></i>
              Drag and drop file here, or
              <a>click here to upload.</a>
            </span>
            <input class="adb-upload_field--input" id="default-file-state" name="default-file-state" type="file">
          </div>
          <div class="adb-caption adb-form--caption">
            Upload a text file of up to 999 discount codes. Each code should be on its own line
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nested Field with Toggle

Use Category Badge

Category Badge

Badges are resized to 24px and appear on the marketplace home and search results pages.

<div class="adb-form--field">
  <label class="adb-toggle" for="toggle-show-category-badge">
    <input class="adb-toggle--input" data-toggle="panel" id="toggle-show-category-badge" name="toggle-show-category-badge" type="checkbox" value="#show-category-badge">
    <span class="adb-toggle--control"></span>
    <span class="adb-toggle--value">
      Use Category Badge
    </span>
  </label>
</div>
<div class="adb-js-panel-target adb-form--nested_fields" id="show-category-badge">
  <div class="adb-form--field">
    <label>Category Badge</label>
    <div class="adb-upload">
      <input class="adb-upload--text" disabled placeholder="No file chosen" type="text">
      <button class="adb-upload--select">
        <input type="file">
        <span class="adb-upload--button_text">Choose File</span>
      </button>
    </div>
    <p class="adb-subtitle">Badges are resized to 24px and appear on the marketplace home and search results pages.</p>
  </div>
</div>

Form Buttons

Place buttons in a <menu> container element with .adb-toolbar class.
For form actions, group buttons together on the left by default. Add .adb-toolbar--item to buttons for proper spacing.
- Primary action buttons that allow users to complete the form or proceed to the next step, such as "Submit," should use the .adb-button__primary class.
- Secondary action buttons .adb-button__secondary or neutral buttons that offer a secondary choice of action should sit next to the primary action button.
- Cancel buttons that allow users to leave the form or undo all edits should use the .adb-button__secret class.
- Delete buttons should always use .adb-button__danger class.

<menu class="adb-toolbar adb-toolbar__polar">
  <menu class="adb-toolbar--item">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Save
    </button>
    <button class="adb-toolbar--item" type="button">
      Save &amp; Preview
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
  <button class="adb-button__danger adb-toolbar--item" type="button">
    <i class="adb-icon__trash"></i>
    Delete
  </button>
</menu>

In the event that we have two primary actions, (e.g. "Save and Delete") align the second primary action ("Delete") on the right by applying .adb-toolbar__polar. Place left and right groups of buttons inside <menu> containers with .adb-toolbar--item. Buttons should follow the order below with more important actions on the outside and less important actions on the inside:

<menu class="adb-toolbar adb-toolbar__polar">
  <menu class="adb-toolbar--item">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Save
    </button>
    <button class="adb-toolbar--item" type="button">
      Save &amp; Preview
    </button>
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
  </menu>
  <menu class="adb-toolbar--item">
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
    <button class="adb-toolbar--item" type="button">
      Save &amp; Preview
    </button>
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Save
    </button>
  </menu>
</menu>

Form Buttons for Step Flow

Align buttons on the right when guiding users through a multi-step flow. An example of this is when your buttons say something to the effect of, "Next, previous, continue, back, etc."

<menu class="adb-toolbar adb-toolbar__polar">
  <menu class="adb-toolbar--item"></menu>
  <menu class="adb-toolbar--item">
    <button class="adb-button__secret adb-toolbar--item" type="button">
      Cancel
    </button>
    <button class="adb-toolbar--item" type="button">
      Previous Step
    </button>
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Next Step
    </button>
  </menu>
</menu>

Labels

Standard Labels

Use <label> to label every form field. Couple <label> with <input> tags with for attribute.
Labels sit above the field or group of fields and align left to maximize readability.

Sign up for Email

Email Address

Topics Business Technology

Frequency Daily Weekly

Format

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Sign up for Email</legend>
    </h3>
    <div class="adb-form--field">
      <label for="label-default-email">
        Email Address
      </label>
      <input id="label-default-email" placeholder="email@address.com" type="email">
    </div>
    <div class="adb-form--field">
      <label for="label-default-checkboxes">
        Topics
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-default-checkbox1">
        <span class="adb-selector--input">
          <input checked id="label-default-checkbox1" name="label-default-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Business
        </span>
      </label>
      <label class="adb-selector adb-js-checkbox" for="label-default-checkbox2">
        <span class="adb-selector--input">
          <input id="label-default-checkbox2" name="label-default-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Technology
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="label-default-radios">
        Frequency
      </label>
      <label class="adb-selector adb-js-radio" for="label-default-radio1">
        <span class="adb-selector--input">
          <input checked id="label-default-radio1" name="label-default-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Daily
        </span>
      </label>
      <label class="adb-selector adb-js-radio" for="label-default-radio2">
        <span class="adb-selector--input">
          <input id="label-default-radio2" name="label-default-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          Weekly
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="label-default-dropdown">
        Format
      </label>
      <div class="adb-js-dropdown adb-dropdown">
        <select id="label-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 Labels

The framework uses inline labels and inputs largely for filter and sort menus.

Inline labels sit to the left of inline form fields.
Use .inline for each inline element. If it's in a menu, you can apply .inline to the menu.
Avoid using inline labels and inputs for forms or menus longer than 1 line.

Mailing List Options

View Free Recommended

Select All None

Sort by

Email Address:

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Mailing List Options</legend>
    </h3>
    <div class="adb-form--field">
      <label class="adb-label__inline" for="label-inline-checkboxes">
        View
      </label>
      <label class="adb-selector adb-selector__inline adb-js-checkbox" for="label-inline-checkbox1">
        <span class="adb-selector--input">
          <input checked id="label-inline-checkbox1" name="label-inline-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Free
        </span>
      </label>
      <label class="adb-selector adb-selector__inline adb-js-checkbox" for="label-inline-checkbox2">
        <span class="adb-selector--input">
          <input id="label-inline-checkbox2" name="label-inline-checkboxes" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Recommended
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label class="adb-label__inline" for="label-inline-radios">
        Select
      </label>
      <label class="adb-selector adb-selector__inline adb-js-radio" for="label-inline-radio1">
        <span class="adb-selector--input">
          <input checked id="label-inline-radio1" name="label-inline-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          All
        </span>
      </label>
      <label class="adb-selector adb-selector__inline adb-js-radio" for="label-inline-radio2">
        <span class="adb-selector--input">
          <input id="label-inline-radio2" name="label-inline-radios" type="radio">
        </span>
        <span class="adb-selector--value">
          None
        </span>
      </label>
    </div>
    <div class="adb-form--field">
      <label class="adb-label__inline" for="label-inline-dropdown">
        Sort by
      </label>
      <div class="adb-js-dropdown adb-dropdown">
        <select id="label-inline-dropdown">
          <option>
            Date
          </option>
          <option>
            Name
          </option>
          <option>
            Ratings
          </option>
        </select>
      </div>
    </div>
    <div class="adb-form--field">
      <label class="adb-label__inline" for="label-inline-email">
        Email Address:
      </label>
      <input id="label-inline-email" placeholder="email@address.com" type="email">
    </div>
  </fieldset>
</form>

Captions and Footnotes

When labels alone do not suffice to describe an option, place a .adb-caption or .adb-footnote paragraph below.

Vendor Settings

Activation Customers must enter a phone number to activate their account

Please provide a valid, 10-digit phone number starting with the area code.

Edit robots.txt

The robots.txt file informs search engine crawlers of what should be excluded from site indexing. Read more here about formatting and standard examples of robot.txt files.

<form class="adb-form">
  <fieldset>
    <h3>
      <legend>Vendor Settings</legend>
    </h3>
    <div class="adb-form--field">
      <label>Activation</label>
      <label class="adb-selector adb-js-checkbox" for="activation">
        <span class="adb-selector--input">
          <input checked id="activation" name="activation" type="checkbox">
        </span>
        <span class="adb-selector--value">
          Customers must enter a phone number to activate their account
        </span>
        <div class="adb-caption adb-form--caption">Please provide a valid, 10-digit phone number starting with the area code.</div>
      </label>
    </div>
    <div class="adb-form--field">
      <label for="robots">
        Edit robots.txt
      </label>
      <textarea>User-agent: *&#x000A;Disallow: /*</textarea>
      <div class="adb-caption adb-form--caption">
        The robots.txt file informs search engine crawlers of what should be excluded from site indexing. Read more here about formatting and standard examples of robot.txt files.
      </div>
    </div>
  </fieldset>
</form>

Base by AppDirect

Forms

General Guidelines

Sign up

Contained Set of Fields

Reviews & Questions

Inline Fields

Shipping Information

Billing Information

Input Rows

Sizes

Input Row

Input Row with Dropdown Selector

Input Row

Input Row with Dropdown Selector

States

Input Tables

Input Table with Upload Fields

Nested Fields

Nested Field with Toggle

Form Buttons

Form Buttons for Step Flow

Labels

Standard Labels

Sign up for Email

Inline Labels

Mailing List Options

Captions and Footnotes

Vendor Settings