Components

Lookups

Lookup is an advanced inline search form.

SingleSingle › DefaultSingle › ActiveSingle › TypeaheadSingle › With selectionSingledev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-form-element slds-lookup" data-select="single">
  <label class="slds-form-element__label" for="lookup-63">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-63" class="slds-lookup__search-input slds-input" placeholder="Search Accounts" aria-owns="lookup-63" role="combobox" aria-activedescendant="" aria-expanded="false" aria-autocomplete="list" />
    </div>
  </div>
  <div class="slds-lookup__menu" id="lookup-63">
    <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-474" 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-475" 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-476" 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-477" 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-478" 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-479" 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-480" 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>

PolymorphicPolymorphic › DefaultPolymorphic › Object dropdownPolymorphic › ActivePolymorphic › TypeaheadPolymorphic › With selectionPolymorphicdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-form-element slds-lookup" data-select="single">
  <label class="slds-form-element__label" for="lookup-64">Account Name</label>
  <div class="slds-form-element__control slds-grid slds-box--border">
    <div class="slds-dropdown--trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
      <svg class="slds-icon slds-icon-standard-account slds-icon--small" aria-hidden="true">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
      </svg>
      <button class="slds-button slds-button--icon slds-button--icon-small" aria-haspopup="true" title="Filter by object">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">Filter by object</span>
      </button>
    </div>
    <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
      <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-64" class="slds-lookup__search-input slds-input--bare" placeholder="Search Accounts" aria-owns="lookup-64" role="combobox" aria-activedescendant="" aria-expanded="false" aria-autocomplete="list" />
    </div>
  </div>
  <div class="slds-lookup__menu" id="lookup-64">
    <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-482" 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-483" 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-484" 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-485" 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-486" 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-487" 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-488" 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>

Advanced ModalAdvanced ModalprototypeNot Compatible with S1 Mobile

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

Component Overview

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

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-lookup
Applied to:

<div>

Outcome:

Initializes lookup

Required:

Required

Comments:

Accepts [data-select] and [data-scope] attributes with the values of single/multi

.slds-lookup__menu
Applied to:

<div>

Outcome:

Initializes lookup results list container

Required:

Required

Comments:

Applies positioning and container styles

.slds-lookup__list
Applied to:

<ul>

Outcome:

Initializes lookup results list

Required:

Required

Comments:

--

.slds-lookup__item
Applied to:

<li>

Outcome:

Results list item

Required:

Required

Comments:

--

.slds-lookup__item--label
Applied to:

<div>

Outcome:

Non-actionable label inside of a lookup item

Required:

Required

Comments:

--

.slds-lookup__item-action
Applied to:

<a>

Outcome:

Actionable element inside of a lookup item

Required:

Required

Comments:

--

.slds-lookup__item-action--label
Applied to:

.slds-lookup__item-action

Outcome:

Actionable element inside of a lookup item that's output is single line text

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__result-text
Applied to:

<span>

Outcome:

Primary entity name within lookup item

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__result-meta
Applied to:

<a>

Outcome:

Secondary info of primary entity name within lookup item

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__search-input
Applied to:

<input>

Outcome:

Styles for a lookup's form input

Required:

No, optional element or modifier

Comments:

--

.slds-has-focus
Applied to:

.slds-lookup__item

Outcome:

Lookup options aren't actionable so this class provides focus for keyboard interactions

Required:

No, optional element or modifier

Comments:

--