lookups

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:

• A Combobox must come with an associated label element, with an appropriate for attribute
• slds-combobox acts as the root node to the composite Combobox widget. It takes the role="combobox" attribute as a result
  • aria-haspopup="listbox" attribute is then applied to indicate the Combobox will display a popup, of type listbox
  • aria-expanded="true|false" attribute is applied to describe whether the popup of listbox is currently visible or not
• aria-activedescendant must be set to the currently selected option within the list
• role="listbox" must be added to the list of results, each result should have role="option"

Expected keyboard interactions:

• Up and Down arrow keys to cycle through the available options in the list, also updates aria-activedescendant on the input
• Enter selects the current option and collapses the list
• Escape collapses the list
• Character keys jumps to the first option with those characters

Base

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-1">Relate to</label>
  <div class="slds-form-element__control">

States

Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-2">Relate to</label>
  <div class="slds-form-element__control">

Open - Item Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-3">Relate to</label>
  <div class="slds-form-element__control">

Displaying options based on user input

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-4">Relate to</label>
  <div class="slds-form-element__control">

Option Selected

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-5">Relate to</label>
  <div class="slds-form-element__control">

Grouped

<div class="demo-only" style="height:640px">
  <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-modal="true" aria-describedby="modal-content-id-1">
    <div class="slds-modal__container">

Multi Entity

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-1">Relate to</label>
  <div class="slds-form-element__control">

States

Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-1">Relate to</label>
  <div class="slds-form-element__control">

Open - Item Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-2">Relate to</label>
  <div class="slds-form-element__control">

Option(s) Selected

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-3">Relate to</label>
  <div class="slds-form-element__control">

Focused - Option(s) Selected

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-id-4">Relate to</label>
  <div class="slds-form-element__control">