Components

List Builder

The List builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object.

BaseBase › DefaultBase › Items selectedBase › SearchingBase › Filtered ResultsBasedev readyNot Compatible with S1 Mobile

Preview

Code

<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal--large" aria-labelledby="id-of-modalheader-h2">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
      <h2 id="id-of-modalheader-h2" class="slds-text-heading--medium">Add Products</h2>
      <p class="slds-m-top--x-small">Pricebook: Salesforce Products</p>
    </div>
    <div class="slds-modal__content slds-grid slds-grow">
      <div class="slds-grid slds-grid--vertical">
        <div class="slds-p-vertical--x-small slds-p-horizontal--large slds-shrink-none slds-theme--shade">
          <div class="slds-form-element slds-lookup" data-select="single">
            <label class="slds-form-element__label slds-assistive-text" for="lookup-2046">Account Name</label>
            <div class="slds-form-element__control">
              <div class="slds-input-has-icon slds-input-has-icon--right">
                <svg class="slds-input__icon" aria-hidden="true">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input type="search" id="lookup-2046" class="slds-lookup__search-input slds-input" placeholder="Search Accounts" aria-owns="lookup-2046" role="combobox" aria-activedescendant="" aria-expanded="false" aria-autocomplete="list" />
              </div>
            </div>
            <div class="slds-lookup__menu" id="lookup-2046">
              <div class="slds-lookup__item--label slds-text-body--small">Recent Accounts</div>
              <ul class="slds-lookup__list" role="listbox">
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2048" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">The Boston Consulting Group</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Boston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2049" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Acuity</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Sheboygan</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2050" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">SAS Insistute</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Cary</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2051" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Genentech</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • South San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2052" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Camden Property Trust</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Houston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media" id="lookup-option-2053" role="option">
                    <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Salesforce.com, Inc.</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-2054" role="option">
                    <svg class="slds-icon slds-icon--x-small slds-icon-text-default" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="slds-text-title slds-m-top--x-small" aria-live="polite">0 Item(s) Selected</div>
        </div>
        <div class="slds-scrollable slds-grow">
          <table role="grid" class="slds-table slds-table--fixed-layout slds-table--bordered slds-no-row-hover slds-scrollable--none">
            <thead>
              <tr class="slds-line-height--reset">
                <th scope="col" style="width:3.75rem;"></th>
                <th aria-label="Name" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                  <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
                    <span class="slds-assistive-text">Sort </span>
                    <span class="slds-truncate" title="Name">Name</span>
                    <div class="slds-icon_container">
                      <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                      </svg>
                    </div>
                    <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                  </a>
                  <div class="slds-resizable">
                    <label for="cell-resize-handle-2055" class="slds-assistive-text">Name column width</label>
                    <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-2055" tabindex="-1" />
                    <span class="slds-resizable__handle">
                      <span class="slds-resizable__divider"></span>
                    </span>
                  </div>
                </th>
                <th aria-label="Product Code" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                  <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
                    <span class="slds-assistive-text">Sort </span>
                    <span class="slds-truncate" title="Product Code">Product Code</span>
                    <div class="slds-icon_container">
                      <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                      </svg>
                    </div>
                    <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                  </a>
                  <div class="slds-resizable">
                    <label for="cell-resize-handle-2056" class="slds-assistive-text">Product Code column width</label>
                    <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-2056" tabindex="-1" />
                    <span class="slds-resizable__handle">
                      <span class="slds-resizable__divider"></span>
                    </span>
                  </div>
                </th>
                <th aria-label="List Price" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                  <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
                    <span class="slds-assistive-text">Sort </span>
                    <span class="slds-truncate" title="List Price">List Price</span>
                    <div class="slds-icon_container">
                      <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                      </svg>
                    </div>
                    <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                  </a>
                  <div class="slds-resizable">
                    <label for="cell-resize-handle-2057" class="slds-assistive-text">List Price column width</label>
                    <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-2057" tabindex="-1" />
                    <span class="slds-resizable__handle">
                      <span class="slds-resizable__divider"></span>
                    </span>
                  </div>
                </th>
                <th aria-label="Product Family" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
                  <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
                    <span class="slds-assistive-text">Sort </span>
                    <span class="slds-truncate" title="Product Family">Product Family</span>
                    <div class="slds-icon_container">
                      <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
                      </svg>
                    </div>
                    <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
                  </a>
                  <div class="slds-resizable">
                    <label for="cell-resize-handle-2058" class="slds-assistive-text">Product Family column width</label>
                    <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-2058" tabindex="-1" />
                    <span class="slds-resizable__handle">
                      <span class="slds-resizable__divider"></span>
                    </span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="0" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2059" tabindex="-1" />
                    <label for="add-checkbox-2059" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 1</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2060" tabindex="-1" />
                    <label for="add-checkbox-2060" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 2</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2061" tabindex="-1" />
                    <label for="add-checkbox-2061" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 3</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2062" tabindex="-1" />
                    <label for="add-checkbox-2062" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 4</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2063" tabindex="-1" />
                    <label for="add-checkbox-2063" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 5</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2064" tabindex="-1" />
                    <label for="add-checkbox-2064" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 6</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2065" tabindex="-1" />
                    <label for="add-checkbox-2065" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 7</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
              <tr class="slds-hint-parent">
                <td role="gridcell" tabindex="-1" class="slds-text-align--right" style="width:3.75rem;">
                  <div class="slds-checkbox--add-button">
                    <input type="checkbox" class="slds-assistive-text" id="add-checkbox-2066" tabindex="-1" />
                    <label for="add-checkbox-2066" class="slds-checkbox--faux">
                      <span class="slds-assistive-text">Select item 8</span>
                    </label>
                  </div>
                </td>
                <th scope="row">
                  <div class="slds-truncate" title="Analytics">Analytics</div>
                </th>
                <td role="gridcell">
                  <div class="slds-truncate" title="ANTLY">ANTLY</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="5000.00">5000.00</div>
                </td>
                <td role="gridcell">
                  <div class="slds-truncate" title="Analytics Product">Analytics Product</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="slds-modal__footer">
      <button class="slds-button slds-button--neutral">Cancel</button>
      <button class="slds-button slds-button--brand">Next</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>

Component Overview

The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.