Lookups
- HTML/CSS:Dev Ready
- Layout:Desktop Only
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-expandedattribute whose value isfalsewhen the results list is hidden,truewhen the results list is visible - Input field has an
aria-activedescendantattribute 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-activedescendantvalue - Enter key selects highlighted option and collapses the results list
- Escape key collapses the results list
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-combobox-group |
|---|---|
| Summary | Container for a combobox group |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| 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 |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-is-open |
|---|---|
| Summary | Opens listbox dropdown |
| Restrict | .slds-combobox |
| Modifier | True |
| 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 |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| 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 |