Lookups

Lookups

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

BaseDesktop OnlyRequires ui:scrollerWrapper

Preview

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-group
Summary

Container for a combobox group

Restrictdiv
VariantTrue
Selector.slds-combobox_object-switcher
Summary

Modifier that identifies the combobox as the object switcher, applies specific interactions for its context

Restrict.slds-combobox-group div
Selector.slds-has-selection
Summary

Modifier that notifies the combobox group that a selection has been made

Restrict.slds-combobox-group, .slds-combobox_container
Selector.slds-combobox-addon_start
Summary

The first combobox in the combobox group

Restrict.slds-combobox-group div
Selector.slds-combobox-addon_end
Summary

The last combobox in the combobox group

Restrict.slds-combobox-group div
Selector.slds-listbox_selection-group
Summary

The container of pill selections found inside of a combobox group

Restrict.slds-combobox-group ~ div, .slds-combobox_container ~ div
Selector.slds-is-expanded
Summary

Expanded state of a selection group

Restrict.slds-listbox_selection-group
Selector.slds-listbox-toggle
Summary

Toggle button to show all of the pill selections

Restrict.slds-listbox_selection-group > span
Selector.slds-combobox
Summary

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

Restrictdiv
VariantTrue
Selector.slds-is-open
Summary

Opens listbox dropdown

Restrict.slds-combobox
ModifierTrue
Selector.slds-combobox__form-element
Summary

Form element with combobox input

Restrict.slds-combobox > div
Selector.slds-combobox__input-entity-icon
Summary

If readonly selection is an entity, use this class

Restrict.slds-combobox__form-element span
Selector.slds-combobox__input-value
Summary

Class to target styling the value of a combobox input

Restrict.slds-combobox input
Selector.slds-combobox__input
Summary

Input field within a combobox

Restrict.slds-combobox input
Selector.slds-has-focus
Summary

Force focus state of the input

Restrict.slds-combobox__input
Selector.slds-has-icon_left
Summary

Modifier to the combobox when an SVG icon sits adjacent to the combobox form element

Restrict.slds-combobox
Selector.slds-combobox-group
Summary

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

Restrictdiv
VariantTrue
Selector.slds-combobox_object-switcher
Summary

Modifier that identifies the combobox as the object switcher, applies specific interactions for its context

Restrict.slds-combobox-group div
Selector.slds-has-selection
Summary

Modifier that notifies the combobox group that a selection has been made

Restrict.slds-combobox-group, .slds-combobox_container
Selector.slds-combobox-addon_start
Summary

The first combobox in the combobox group

Restrict.slds-combobox-group div
Selector.slds-combobox-addon_end
Summary

The last combobox in the combobox group

Restrict.slds-combobox-group div
Selector.slds-listbox_selection-group
Summary

The container of pill selections found inside of a combobox group

Restrict.slds-combobox-group ~ div, .slds-combobox_container ~ div
Selector.slds-is-expanded
Summary

Expanded state of a selection group

Restrict.slds-listbox_selection-group
Selector.slds-listbox-toggle
Summary

Toggle button to show all of the pill selections

Restrict.slds-listbox_selection-group > span