Lookups

Lookups

Lookup is an autocomplete combobox that will search against a database object.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-unique-id">Search</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container slds-has-inline-listbox">
      <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-lookup" aria-expanded="false" aria-haspopup="listbox" role="combobox">
        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right">
          <input type="text" class="slds-input slds-combobox__input" id="combobox-unique-id" aria-autocomplete="list" aria-controls="listbox-unique-id" autocomplete="off" role="textbox" placeholder="Search Salesforce" />
          <span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right" title="Description of icon when needed">
            <svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>
            <span class="slds-assistive-text">Description of icon</span>
          </span>
        </div>
        <div id="listbox-unique-id" role="listbox">
          <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
            <li role="presentation" class="slds-listbox__item">
              <span id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                <span class="slds-media__figure">
                  <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
                    <svg class="slds-icon slds-icon_small" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <span class="slds-assistive-text">Description of icon</span>
                  </span>
                </span>
                <span class="slds-media__body">
                  <span class="slds-listbox__option-text slds-listbox__option-text_entity">Acme</span>
                  <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • San Francisco</span>
                </span>
              </span>
            </li>
            <li role="presentation" class="slds-listbox__item">
              <span id="listbox-option-unique-id-02" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                <span class="slds-media__figure">
                  <span class="slds-icon_container slds-icon-standard-account" title="Description of icon when needed">
                    <svg class="slds-icon slds-icon_small" aria-hidden="true">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <span class="slds-assistive-text">Description of icon</span>
                  </span>
                </span>
                <span class="slds-media__body">
                  <span class="slds-listbox__option-text slds-listbox__option-text_entity">Salesforce.com, Inc.</span>
                  <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • San Francisco</span>
                </span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

About Lookups

Note — A lookup is a combobox component, please find implementation documentation under the combobox component

The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects.

You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on record home and object home.

Accessibility

Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ARIA attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology.

Expected markup:

  • Input field has attributes role="combobox", aria-autocomplete="list"
  • Input field has an aria-expanded attribute whose value is false when the results list is hidden, true when the results list is visible
  • Input field has an aria-activedescendant attribute whose value is the id of the highlighted results list option, no value if nothing’s highlighted in the list
  • Results list is an <ul role="presentation">, where each item is containing an <a href="javascript:void(0);" role="option">

Expected keyboard interactions:

  • Character keys filter the list
  • Up and down arrow keys cycle through the available options in the list and update the input field’s aria-activedescendant value
  • Enter key selects highlighted option and collapses the results list
  • Escape key collapses the results list

Overview of CSS Classes

Selector.slds-combobox-lookup
Summary

Container that manages layout when a listbox of pill options sit next to a combobox search input

Restrictdiv
VariantTrue
Selector.slds-has-object-switcher
Summary

Container that manages layout when a listbox of pill options sit next to a combobox search input

Restrict.slds-combobox-lookup
VariantTrue