0

I am looking at the lightning design system component blueprint documentation and reviewing the various ways we can use the Lightning Combobox.

For example, in the documentation, they go over Grouped Comboboxes (Cross-entity / Polymorphic) examples that leverage the combobox. The example code that they provide does not leverage the base lightning component combobox.

With the base component, can we develop the same functionality that that they provide in the docs? If not, when should we develop on our own vs leveraging the base components

Base Component

      <lightning-combobox
                name="status"
                label="Status"
                placeholder="Choose Status"
                value={value}
                onchange={handleChange}
                options={statusOptions}
            >

Component Blueprint From Documentation

<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-24">Relate To</label>
<div class="slds-form-element__control">
<div class="slds-combobox-group">
<div class="slds-combobox_object-switcher slds-combobox-addon_start">
<div class="slds-form-element">
<label class="slds-form-element__label slds-assistive-text" for="combobox-id-25" id="combobox-label-id-138">Filter Search by:</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-controls="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<button type="button" class="slds-input_faux slds-combobox__input slds-combobox__input-value" aria-labelledby="combobox-label-id-138 combobox-id-25-selected-value" id="combobox-id-25-selected-value" aria-controls="objectswitcher-listbox-id-01"
aria-expanded="false" aria-haspopup="listbox">
<span class="slds-truncate" id="combobox-value-id-111">Accounts</span>
</button>
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_xx-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</span>
</div>
<div id="objectswitcher-listbox-id-01" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_x-small slds-dropdown_left" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="group" aria-label="Suggested for you">
<li role="presentation" class="slds-listbox__item">
<div id="object0" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
<h3 class="slds-listbox__option-header" role="presentation">Suggested for you</h3>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div aria-checked="true" id="object1" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-is-selected" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-utility-check slds-current-color">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Accounts">Accounts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object2" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Reports">Reports</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object3" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Contacts">Contacts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object4" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Files">Files</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object5" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Groups">Groups</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object6" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Leads">Leads</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object7" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Notes">Notes</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slds-combobox_container slds-combobox-addon_end">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" id="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-id-24" aria-autocomplete="list" aria-controls="listbox-id-20" aria-expanded="false" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<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>
</div>
<div id="listbox-id-20" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Burlington Textiles Corp of America</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Burlington, NC</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Dickenson plc</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Lawrence, KS</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option3" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Edge Communications</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Austin, TX</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option4" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Express Logistics and Transport</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Portland, OR</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
4
  • The blueprints show you the HTML structure and SLDS classes to apply for a given visual presentation. What they don't do is give you the behaviour side of things. The base components can be assumed to be using the blueprints within them, but also give you behaviours and an API, including events.
    – Phil W
    Jul 2, 2022 at 21:08
  • @PhilW So to be clear, everything that the blueprints offer can be achieved with the base component? I would obviously prefer to use the base components. Am I understanding you correctly? If so, how would the base component achieve my above example? Jul 2, 2022 at 21:44
  • 1
    If I check the docs for the base component, there's no functionality for a grouped combobox. So yes, in this case, you'll have to develop it yourself.
    – vince
    Jul 2, 2022 at 22:45
  • 1
    Also see a similar issue here: salesforce.stackexchange.com/questions/264661/…
    – vince
    Jul 2, 2022 at 22:45

1 Answer 1

1

The blueprints are used for porting the Lightning Design System to other platforms, such as React, Vue, Svelte, etc. They don't include any JavaScript because those might not be compatible with the framework in question. You can also check out lwc-recipes and lightning-base-components. If you can't find something in these two repos, odds are, you'll have to write your own component. Most of them are not too bad, but it's more complicated than just copy-paste.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .