Base by AppDirect

Forms

Help users add and edit data

Option Selectors

Radio Selectors

Use radio selectors when there are 6 or fewer options.

Default Styles 

<label class="adb-selector adb-js-radio" for="guide-radio-default1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-default1" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    Show as primary pricing plan
    Aut odit aut fugit sed. quia consequuntur magni dolores eos. qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit
  </span>
</label>
<label class="adb-selector adb-js-radio" for="guide-radio-default2">
  <span class="adb-selector--input">
    <input id="guide-radio-default2" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    This edition will be selected when a customer chooses free trial
  </span>
</label>
<label class="adb-selector adb-js-radio" for="guide-radio-default3">
  <span class="adb-selector--input">
    <input disabled id="guide-radio-default3" name="radio-default" type="radio">
  </span>
  <span class="adb-selector--value">
    This edition can only be bought as a bundle.
  </span>
</label>

<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-inline1" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 1
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline2">
  <span class="adb-selector--input">
    <input id="guide-radio-inline2" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 2
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-radio" for="guide-radio-inline3">
  <span class="adb-selector--input">
    <input id="guide-radio-inline3" name="radio-inline" type="radio">
  </span>
  <span class="adb-selector--value">
    Inline option 3
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-bar1" name="radio-bars" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-bar2">
  <span class="adb-selector--input">
    <input id="guide-radio-bar2" name="radio-bars" type="radio">
  </span>
  <span class="adb-selector--value">
    <span>Option 2</span>
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol1">
  <span class="adb-selector--input">
    <input checked id="guide-radio-symbol1" name="radio-bars-symbol" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-radio" for="guide-radio-symbol2">
  <span class="adb-selector--input">
    <input id="guide-radio-symbol2" name="radio-bars-symbol" type="radio">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>

Radio Selectors as Table Rows

Edition Included Price
Gold Edition 3 users
25 Gigabytes
  • $199.95 / user / month Free Trial
  • $180.00 / month for 1-25 users + $9.95.00 / email
  • $180.00 / month Sed quia non numquam eius + $9.95.00 / email Modi tempora incidunt ut labore
Silver Edition 2 users
  • $79.95 / user / month + $0.00 / email / month 2-Month Contract
  • $199.95 / user / day + $0.00 / email / month 2-Day Contract
Bronze Edition 1 users
  • $9.95 / user / month for 1-25 users + $0.00 / email / month 
<div class="adb-table__scrollable">
  <table class="adb-table__actionable adb-table__multiline">
    <colgroup>
      <col span="1">
      <col width="30%">
      <col width="20%">
      <col width="50%">
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th>Edition</th>
        <th>Included</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr class="adb-js-radio">
        <td>
          <input checked id="purchase-pricing-plan1" name="purchase-pricing-plans" type="radio">
        </td>
        <td>Gold Edition</td>
        <td>
          3 users
          <br>
          25 Gigabytes
        </td>
        <td>
          <ul class="adb-list__feature">
            <li>
              <strong>$199.95 / user / month</strong>
              <span class="adb-badge adb-badge__free">Free Trial</span>
            </li>
            <li>
              <strong>$180.00 / month for 1-25 users</strong>
              <span class="adb-caption">+ $9.95.00 / email</span>
            </li>
            <li>
              <strong>
                $180.00 / month
                Et dolore magnam aliquam quaerat
              </strong>
              <span class="adb-caption">
                + $9.95.00 / email
                Voluptatem ut enim ad minima
              </span>
            </li>
          </ul>
        </td>
      </tr>
      <tr class="adb-js-radio">
        <td>
          <input id="purchase-pricing-plan2" name="purchase-pricing-plans" type="radio">
        </td>
        <td>Silver Edition</td>
        <td>2 users</td>
        <td>
          <ul class="adb-list__feature">
            <li>
              <strong>$79.95 / user / month</strong>
              <span class="adb-caption">+ $0.00 / email / month</span>
              <span class="adb-badge adb-badge__info">2-Month Contract</span>
            </li>
            <li>
              <strong>$199.95 / user / day</strong>
              <span class="adb-caption">+ $0.00 / email / month</span>
              <span class="adb-badge adb-badge__info">2-Day Contract</span>
            </li>
          </ul>
        </td>
      </tr>
      <tr class="adb-js-radio">
        <td>
          <input id="purchase-pricing-plan3" name="purchase-pricing-plans" type="radio">
        </td>
        <td>Bronze Edition</td>
        <td>1 users</td>
        <td>
          <ul class="adb-list__feature">
            <li>
              <strong>$9.95 / user / month for 1-25 users</strong>
              <span class="adb-caption">+ $0.00 / email / month</span>
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Radio Selectors as Images & Colors

For consistent sizing it is recommended to wrap the images inside the Fixed Sizing options provided by Avatar & Logos for square, horizontal and vertical images.

Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xsmall">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xsmall" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xsmall">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xsmall">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xsmall" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xsmall">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xsmall">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xsmall" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xsmall">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>
Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_small">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_small" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_small">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_small">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_small" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_small">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_small">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_small" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_small">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>
Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_medium">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_medium" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_medium">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_medium">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_medium" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_medium">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_medium">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_medium" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_medium">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>
Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_large">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_large" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_large">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_large">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_large" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_large">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_large">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_large" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_large">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>
Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>
Space Grey
Gold
White
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xxlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xxlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xxlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-space-grey.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Space Grey</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xxlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xxlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xxlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-gold.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">Gold</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="device_xxlarge">
    <span class="adb-selector--input adb-is-hidden">
      <input name="device_xxlarge" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open adb-id__vertical_xxlarge">
          <img class="adb-id--img" src="../../images/assets/iphone-wide-white.png?1567620427" />
        </div>
      </div>
      <div class="adb-caption">White</div>
    </span>
  </div>
</div>

Radio Selectors as Colors

Image & Color based Radio Selectors may add a custom outer color for the selected option.

Red
Green
Blue
 
<div class="adb-form--field">
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="swatch">
    <span class="adb-selector--input adb-is-hidden">
      <input name="swatch" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open">
          <div class="adb-id--img" style="width: 100px; height: 100px; background-color: #E33D51; color: #2D2D2D;"></div>
        </div>
      </div>
      <div class="adb-caption">Red</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-is-active adb-js-radio" for="swatch">
    <span class="adb-selector--input adb-is-hidden">
      <input checked name="swatch" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open">
          <div class="adb-id--img" style="width: 100px; height: 100px; background-color: #76BD22; color: #2D2D2D;"></div>
        </div>
      </div>
      <div class="adb-caption">Green</div>
    </span>
  </div>
  <div class="adb-selector adb-selector__inline adb-selector--image adb-js-radio" for="swatch">
    <span class="adb-selector--input adb-is-hidden">
      <input name="swatch" type="radio">
    </span>
    <span class="adb-selector--value">
      <div class="adb-selector--image--content">
        <div class=" adb-id adb-id__open">
          <div class="adb-id--img" style="width: 100px; height: 100px; background-color: #009ABF;  color: #2D2D2D;"></div>
        </div>
      </div>
      <div class="adb-caption">Blue</div>
    </span>
  </div>
</div>

Checkboxes

Default Styles 

<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-default1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Show as primary pricing plan
  </span>
</label>
<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-default2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    This edition will be selected when a customer chooses free trial
  </span>
</label>
<label class="adb-selector adb-js-checkbox" for="guide-checkbox-default3">
  <span class="adb-selector--input">
    <input disabled id="guide-checkbox-default3" type="checkbox">
  </span>
  <span class="adb-selector--value">
    This edition can only be bought as a bundle.
  </span>
</label>

<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-inline1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 1
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-inline2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 2
  </span>
</label>
<label class="adb-selector adb-selector__inline adb-js-checkbox" for="guide-checkbox-inline3">
  <span class="adb-selector--input">
    <input id="guide-checkbox-inline3" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Inline option 3
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-bar1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-bar2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-bar2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
</label>

<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol1">
  <span class="adb-selector--input">
    <input checked id="guide-checkbox-symbol1" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 1
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>
<label class="adb-selector adb-selector__button adb-button adb-button__neutral adb-button__medium adb-js-checkbox" for="guide-checkbox-symbol2">
  <span class="adb-selector--input">
    <input id="guide-checkbox-symbol2" type="checkbox">
  </span>
  <span class="adb-selector--value">
    Option 2
  </span>
  <span class="adb-selector--affix">
    <i class="adb-icon__star"></i>
  </span>
</label>

Multi-Select Checkbox

<ul class="adb-js-checkboxes_field adb-checkboxes_field">
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category1">
      <span class="adb-selector--input">
        <input id="editor-categories-category1" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 1
      </span>
    </label>
    <ul class="adb-checkboxes_field--item_list">
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category6">
          <span class="adb-selector--input">
            <input id="editor-categories-category6" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 1
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category7">
          <span class="adb-selector--input">
            <input id="editor-categories-category7" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 2
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category8">
          <span class="adb-selector--input">
            <input id="editor-categories-category8" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 3
          </span>
        </label>
      </li>
    </ul>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category2">
      <span class="adb-selector--input">
        <input id="editor-categories-category2" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 2
      </span>
    </label>
    <ul class="adb-checkboxes_field--item_list">
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category9">
          <span class="adb-selector--input">
            <input id="editor-categories-category9" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 1
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category10">
          <span class="adb-selector--input">
            <input id="editor-categories-category10" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 2
          </span>
        </label>
      </li>
      <li class="adb-checkboxes_field--item">
        <label class="adb-selector adb-js-checkbox" for="editor-categories-category11">
          <span class="adb-selector--input">
            <input id="editor-categories-category11" type="checkbox">
          </span>
          <span class="adb-selector--value">
            Child Category 3
          </span>
        </label>
      </li>
    </ul>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category3">
      <span class="adb-selector--input">
        <input id="editor-categories-category3" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 3
      </span>
    </label>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category4">
      <span class="adb-selector--input">
        <input id="editor-categories-category4" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 4
      </span>
    </label>
  </li>
  <li class="adb-checkboxes_field--item">
    <label class="adb-selector adb-js-checkbox" for="editor-categories-category5">
      <span class="adb-selector--input">
        <input id="editor-categories-category5" type="checkbox">
      </span>
      <span class="adb-selector--value">
        Parent Category 5
      </span>
    </label>
  </li>
</ul>

<div class="adb-js-tags_field adb-tags_select_all">
  <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory adb-tags_field--subcategory--selectall">
    <label class="adb-selector adb-js-checkbox adb-selector-selectall" for="selectAll">
      <span class="adb-selector--input">
        <input id="selectAll" type="checkbox" value="Select All">
      </span>
      <span class="adb-selector--value">
        Select All
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory7">
      <span class="adb-selector--input">
        <input id="subcategory7" type="checkbox" value="Real Estate">
      </span>
      <span class="adb-selector--value">
        Real Estate
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory8">
      <span class="adb-selector--input">
        <input id="subcategory8" type="checkbox" value="Law">
      </span>
      <span class="adb-selector--value">
        Law
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory9">
      <span class="adb-selector--input">
        <input id="subcategory9" type="checkbox" value="Education">
      </span>
      <span class="adb-selector--value">
        Education
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory10">
      <span class="adb-selector--input">
        <input id="subcategory10" type="checkbox" value="Salon">
      </span>
      <span class="adb-selector--value">
        Salon
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory11">
      <span class="adb-selector--input">
        <input id="subcategory11" type="checkbox" value="Fitness">
      </span>
      <span class="adb-selector--value">
        Fitness
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory12">
      <span class="adb-selector--input">
        <input id="subcategory12" type="checkbox" value="Health Care">
      </span>
      <span class="adb-selector--value">
        Health Care
      </span>
    </label>
    <label class="adb-selector adb-js-checkbox" for="subcategory13">
      <span class="adb-selector--input">
        <input id="subcategory13" type="checkbox" value="Hotel">
      </span>
      <span class="adb-selector--value">
        Hotel
      </span>
    </label>
  </div>
</div>

Tiered Multi-Select Checkboxes

Default Styles

<div class="adb-tags_field adb-js-tags_field">
  <div class="adb-tags_field--inputs">
    <ul class="adb-tags_field--categories">
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category1" id="category1-link">
          Industry
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category2" id="category2-link">
          Type
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category3" id="category3-link">
          Attribute
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
    </ul>
    <div class="adb-tags_field--subcategories">
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category1">
        <label class="adb-selector adb-js-checkbox" for="subcategory7">
          <span class="adb-selector--input">
            <input id="subcategory7" type="checkbox" value="Real Estate">
          </span>
          <span class="adb-selector--value">
            Real Estate
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory8">
          <span class="adb-selector--input">
            <input id="subcategory8" type="checkbox" value="Law">
          </span>
          <span class="adb-selector--value">
            Law
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory9">
          <span class="adb-selector--input">
            <input id="subcategory9" type="checkbox" value="Education">
          </span>
          <span class="adb-selector--value">
            Education
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory10">
          <span class="adb-selector--input">
            <input id="subcategory10" type="checkbox" value="Salon">
          </span>
          <span class="adb-selector--value">
            Salon
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory11">
          <span class="adb-selector--input">
            <input id="subcategory11" type="checkbox" value="Fitness">
          </span>
          <span class="adb-selector--value">
            Fitness
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory12">
          <span class="adb-selector--input">
            <input id="subcategory12" type="checkbox" value="Health Care">
          </span>
          <span class="adb-selector--value">
            Health Care
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory13">
          <span class="adb-selector--input">
            <input id="subcategory13" type="checkbox" value="Hotel">
          </span>
          <span class="adb-selector--value">
            Hotel
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category2">
        <label class="adb-selector adb-js-checkbox" for="subcategory3">
          <span class="adb-selector--input">
            <input id="subcategory3" type="checkbox" value="Customer Relationship Management">
          </span>
          <span class="adb-selector--value">
            Customer Relationship Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory4">
          <span class="adb-selector--input">
            <input id="subcategory4" type="checkbox" value="Call Management">
          </span>
          <span class="adb-selector--value">
            Call Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory5">
          <span class="adb-selector--input">
            <input id="subcategory5" type="checkbox" value="Live Chat">
          </span>
          <span class="adb-selector--value">
            Live Chat
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory6">
          <span class="adb-selector--input">
            <input id="subcategory6" type="checkbox" value="Scheduling and Appointments">
          </span>
          <span class="adb-selector--value">
            Scheduling and Appointments
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category3">
        <label class="adb-selector adb-js-checkbox" for="subcategory1">
          <span class="adb-selector--input">
            <input id="subcategory1" type="checkbox" value="Conferencing">
          </span>
          <span class="adb-selector--value">
            Conferencing
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory2">
          <span class="adb-selector--input">
            <input id="subcategory2" type="checkbox" value="Email">
          </span>
          <span class="adb-selector--value">
            Email
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tags adb-tags_field--tags adb-js-tags_field--tags"></div>
</div>

<div class="adb-tags_field adb-js-tags_field">
  <div class="adb-filters">
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item"></menu>
      <div class="adb-search_field 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-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search by product name">
        </div>
        <div class="adb-input_row--item">
          <button class="adb-button__square_small adb-input_row--item_content">
            <i class="adb-icon__search"></i>
          </button>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-tags_field--inputs">
    <ul class="adb-tags_field--categories">
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-search-1" id="category-search-1-link">
          Industry
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-search-2" id="category-search-2-link">
          Type
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-search-3" id="category-search-3-link">
          Attribute
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
    </ul>
    <div class="adb-tags_field--subcategories">
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category-search-1">
        <label class="adb-selector adb-js-checkbox" for="subcategory7">
          <span class="adb-selector--input">
            <input id="subcategory7" type="checkbox" value="Real Estate">
          </span>
          <span class="adb-selector--value">
            Real Estate
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory8">
          <span class="adb-selector--input">
            <input id="subcategory8" type="checkbox" value="Law">
          </span>
          <span class="adb-selector--value">
            Law
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory9">
          <span class="adb-selector--input">
            <input id="subcategory9" type="checkbox" value="Education">
          </span>
          <span class="adb-selector--value">
            Education
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory10">
          <span class="adb-selector--input">
            <input id="subcategory10" type="checkbox" value="Salon">
          </span>
          <span class="adb-selector--value">
            Salon
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory11">
          <span class="adb-selector--input">
            <input id="subcategory11" type="checkbox" value="Fitness">
          </span>
          <span class="adb-selector--value">
            Fitness
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory12">
          <span class="adb-selector--input">
            <input id="subcategory12" type="checkbox" value="Health Care">
          </span>
          <span class="adb-selector--value">
            Health Care
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory13">
          <span class="adb-selector--input">
            <input id="subcategory13" type="checkbox" value="Hotel">
          </span>
          <span class="adb-selector--value">
            Hotel
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category-search-2">
        <label class="adb-selector adb-js-checkbox" for="subcategory3">
          <span class="adb-selector--input">
            <input id="subcategory3" type="checkbox" value="Customer Relationship Management">
          </span>
          <span class="adb-selector--value">
            Customer Relationship Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory4">
          <span class="adb-selector--input">
            <input id="subcategory4" type="checkbox" value="Call Management">
          </span>
          <span class="adb-selector--value">
            Call Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory5">
          <span class="adb-selector--input">
            <input id="subcategory5" type="checkbox" value="Live Chat">
          </span>
          <span class="adb-selector--value">
            Live Chat
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory6">
          <span class="adb-selector--input">
            <input id="subcategory6" type="checkbox" value="Scheduling and Appointments">
          </span>
          <span class="adb-selector--value">
            Scheduling and Appointments
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category-search-3">
        <label class="adb-selector adb-js-checkbox" for="subcategory1">
          <span class="adb-selector--input">
            <input id="subcategory1" type="checkbox" value="Conferencing">
          </span>
          <span class="adb-selector--value">
            Conferencing
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory2">
          <span class="adb-selector--input">
            <input id="subcategory2" type="checkbox" value="Email">
          </span>
          <span class="adb-selector--value">
            Email
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tags adb-tags_field--tags adb-js-tags_field--tags"></div>
</div>

<div class="adb-tags_field adb-js-tags_field adb-tags_select_all">
  <div class="adb-filters">
    <menu class="adb-filters--header">
      <menu class="adb-filters--header_item"></menu>
      <div class="adb-search_field 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-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search by product name">
        </div>
        <div class="adb-input_row--item">
          <button class="adb-button__square_small adb-input_row--item_content">
            <i class="adb-icon__search"></i>
          </button>
        </div>
      </div>
    </menu>
  </div>
  <div class="adb-tags_field--inputs">
    <ul class="adb-tags_field--categories">
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-selectAll-search-1" id="category-selectAll-search-1-link">
          Industry
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-selectAll-search-2" id="category-selectAll-search-2-link">
          Type
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
      <li class="adb-tags_field--category adb-js-tags_field--category">
        <a class="adb-tags_field--category_content" data-selected="0" href="#category-selectAll-search-3" id="category-selectAll-search-3-link">
          Attribute
          <span class="adb-tags_field--badge adb-js-tags_field--badge adb-badge adb-badge__number"></span>
        </a>
      </li>
    </ul>
    <div class="adb-tags_field--subcategories">
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory adb-tags_field--subcategory--selectall" id="category-selectAll-search-1">
        <label class="adb-selector adb-js-checkbox adb-selector-selectall" for="selectAll">
          <span class="adb-selector--input">
            <input id="selectAll" type="checkbox" value="Select All">
          </span>
          <span class="adb-selector--value">
            Select All
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory7">
          <span class="adb-selector--input">
            <input id="subcategory7" type="checkbox" value="Real Estate">
          </span>
          <span class="adb-selector--value">
            Real Estate
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory8">
          <span class="adb-selector--input">
            <input id="subcategory8" type="checkbox" value="Law">
          </span>
          <span class="adb-selector--value">
            Law
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory9">
          <span class="adb-selector--input">
            <input id="subcategory9" type="checkbox" value="Education">
          </span>
          <span class="adb-selector--value">
            Education
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory10">
          <span class="adb-selector--input">
            <input id="subcategory10" type="checkbox" value="Salon">
          </span>
          <span class="adb-selector--value">
            Salon
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory11">
          <span class="adb-selector--input">
            <input id="subcategory11" type="checkbox" value="Fitness">
          </span>
          <span class="adb-selector--value">
            Fitness
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory12">
          <span class="adb-selector--input">
            <input id="subcategory12" type="checkbox" value="Health Care">
          </span>
          <span class="adb-selector--value">
            Health Care
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory13">
          <span class="adb-selector--input">
            <input id="subcategory13" type="checkbox" value="Hotel">
          </span>
          <span class="adb-selector--value">
            Hotel
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category-selectAll-search-2">
        <label class="adb-selector adb-js-checkbox adb-selector-selectall" for="selectAll">
          <span class="adb-selector--input">
            <input id="selectAll" type="checkbox" value="Select All">
          </span>
          <span class="adb-selector--value">
            Select All
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory3">
          <span class="adb-selector--input">
            <input id="subcategory3" type="checkbox" value="Customer Relationship Management">
          </span>
          <span class="adb-selector--value">
            Customer Relationship Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory4">
          <span class="adb-selector--input">
            <input id="subcategory4" type="checkbox" value="Call Management">
          </span>
          <span class="adb-selector--value">
            Call Management
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory5">
          <span class="adb-selector--input">
            <input id="subcategory5" type="checkbox" value="Live Chat">
          </span>
          <span class="adb-selector--value">
            Live Chat
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory6">
          <span class="adb-selector--input">
            <input id="subcategory6" type="checkbox" value="Scheduling and Appointments">
          </span>
          <span class="adb-selector--value">
            Scheduling and Appointments
          </span>
        </label>
      </div>
      <div class="adb-tags_field--subcategory adb-js-tags_field--subcategory" id="category-selectAll-search-3">
        <label class="adb-selector adb-js-checkbox adb-selector-selectall" for="selectAll">
          <span class="adb-selector--input">
            <input id="selectAll" type="checkbox" value="Select All">
          </span>
          <span class="adb-selector--value">
            Select All
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory1">
          <span class="adb-selector--input">
            <input id="subcategory1" type="checkbox" value="Conferencing">
          </span>
          <span class="adb-selector--value">
            Conferencing
          </span>
        </label>
        <label class="adb-selector adb-js-checkbox" for="subcategory2">
          <span class="adb-selector--input">
            <input id="subcategory2" type="checkbox" value="Email">
          </span>
          <span class="adb-selector--value">
            Email
          </span>
        </label>
      </div>
    </div>
  </div>
  <div class="adb-tags adb-tags_field--tags adb-js-tags_field--tags adb-is-hidden"></div>
</div>

Dropdown Selectors

Use dropdown selectors when there are more than 6 options. Functionally, dropdown selectors are different from button menus. Dropdown selectors allow users to select an option for a field in a form whereas action menus function as navigation, allowing users to take different actions or navigate to different pages.

Example Class Code
.adb-js-dropdown.adb-dropdown 
<div class="adb-js-dropdown adb-dropdown">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-dropdown__inset 
<div class="adb-js-dropdown adb-dropdown adb-dropdown__inset">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-is-disabled 
<div class="adb-js-dropdown adb-dropdown adb-is-disabled">
  <select>
    <option>Default first option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-dropdown__dark 
<div class="adb-js-dropdown adb-dropdown adb-dropdown_dark">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-dropdown__dark 
<div class="adb-js-dropdown adb-dropdown adb-dropdown__inset_dark">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

The size of the dropdown itself may vary based the browser interpreting the OS's system user interface.

Like Text Inputs and Context Menus the Dropdowns can have different font-sizing independent from the total input-height.

<div class="adb-js-dropdown adb-dropdown adb-dropdown__sized_small">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

<div class="adb-js-dropdown adb-dropdown">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

<div class="adb-js-dropdown adb-dropdown adb-dropdown__sized_large">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

<div class="adb-js-dropdown adb-dropdown adb-dropdown__sized_xlarge">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
Example Class Code
.adb-js-dropdown.adb-dropdown 
<div class="adb-js-dropdown adb-dropdown">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>
.adb-js-dropdown.adb-dropdown.adb-is-error 
<div class="adb-js-dropdown adb-dropdown adb-is-error">
  <select>
    <option>Default first option</option>
    <option>Lorem ipsum option</option>
    <option>Lorem ipsum option</option>
  </select>
</div>

Below is a fallback option for dropdown selectors, for instances when it is not possible to use Javascript to customize the dropdown.

<select>
  <option>Default first option</option>
  <option>Lorem ipsum option</option>
  <option>Lorem ipsum option</option>
</select>

The Dropdown selectors can be combined with an (autocompleting) multi-select search input. More examples and full documentation under: Search Inputs in a Dropdown Selector.

Toggles

<label class="adb-toggle" for="toggle-input">
  <input class="adb-toggle--input" id="toggle-input" type="checkbox">
  <span class="adb-toggle--control"></span>
  <span class="adb-toggle--value">
    Product Visibility
  </span>
</label>
<label class="adb-toggle" for="toggle-input2">
  <input checked class="adb-toggle--input" id="toggle-input2" type="checkbox">
  <span class="adb-toggle--control"></span>
  <span class="adb-toggle--value">
    Product Visibility
  </span>
</label>

Toggleable Table Rows

Group Users Origin Group Membership

Design

veniam quis nostrum exercitationem ullam
24 Internal

Marketing

corporis nemo enim ipsam voluptatem
182 LDAP

Event Planning

quia voluptas sit suscipit laboriosam
12 Internal

Trump Fan Club

nisi ut aliquid ex ea
42 LDAP

Ciabatto's

commodi consequatur quis autem vel
8 Internal

Engineering

eum iure reprehenderit qui in
8 Internal 
<div class="adb-table" data-toggle-rows>
  <table>
    <colgroup>
      <col span="1" width="40%">
      <col span="1" width="20%">
      <col span="1" width="20%">
      <col span="1" width="20%">
    </colgroup>
    <thead>
      <tr>
        <th class="adb-is-active" data-sort data-sort-order="descending">
          Group
        </th>
        <th data-sort>
          Users
        </th>
        <th>Origin</th>
        <th>Group Membership</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Design
            </a>

          </h4>
          <div class="adb-summary--details">
            ea voluptate velit esse quam
          </div>
        </td>
        <td>
          24
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group1">
            <input checked class="adb-toggle--input" id="user-group1" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Marketing
            </a>

          </h4>
          <div class="adb-summary--details">
            nihil molestiae et iusto odio
          </div>
        </td>
        <td>
          182
        </td>
        <td>
          LDAP
        </td>
        <td>
          <label class="adb-toggle" for="user-group2">
            <input checked class="adb-toggle--input" id="user-group2" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Event Planning
            </a>

          </h4>
          <div class="adb-summary--details">
            dignissimos ducimus qui blanditiis praesentium
          </div>
        </td>
        <td>
          12
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group3">
            <input class="adb-toggle--input" id="user-group3" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Trump Fan Club
            </a>

          </h4>
          <div class="adb-summary--details">
            laudantium totam rem voluptatum deleniti
          </div>
        </td>
        <td>
          42
        </td>
        <td>
          LDAP
        </td>
        <td>
          <label class="adb-toggle" for="user-group4">
            <input class="adb-toggle--input" id="user-group4" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Ciabatto's
            </a>

          </h4>
          <div class="adb-summary--details">
            atque corrupti quos dolores et
          </div>
        </td>
        <td>
          8
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group5">
            <input class="adb-toggle--input" id="user-group5" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
      <tr>
        <td class="adb-summary">
          <h4 class="adb-summary--title">
                        <a data-truncate="line" href="#">Engineering
            </a>

          </h4>
          <div class="adb-summary--details">
            quas molestias excepturi sint occaecati
          </div>
        </td>
        <td>
          8
        </td>
        <td>
          Internal
        </td>
        <td>
          <label class="adb-toggle" for="user-group6">
            <input class="adb-toggle--input" id="user-group6" type="checkbox">
            <span class="adb-toggle--control"></span>
            <span class="adb-toggle--value">
              Member
            </span>
          </label>
        </td>
      </tr>
    </tbody>
  </table>
</div>