Making a Listbox

A listbox is a common UI element that is not implemented in native Photoshop controls nor Spectrum-CSS controls.

But with some creative HTML, CSS and JavaScript, you can make a sp-menu component look and (mostly) act like a listbox.

<sp-menu id="mylistbox" class="listbox" style="height: 300px; margin-left:20px;color:white; width:220px; border:1px white solid; overflow: auto">
    <sp-menu-item row_id="42" selected>My first project</sp-menu-item>
    <sp-menu-item row_id="271828">Project number 2</sp-menu-item>
<sp-menu>
CopyCopied to your clipboard
1<sp-menu id="mylistbox" class="listbox" style="height: 300px; margin-left:20px;color:white; width:220px; border:1px white solid; overflow: auto">
2    <sp-menu-item row_id="42" selected>My first project</sp-menu-item>
3    <sp-menu-item row_id="271828">Project number 2</sp-menu-item>
4<sp-menu>

function listboxChange(evt) {
    const id = evt.target.options[evt.target.selectedIndex].getAttribute('row_id');
    const value = evt.target.value;
    // id will be null if if "row_id" isn't defined on the <sp-menu-item>
    console log(`row_id is ${row_id} and value is ${value});
}
CopyCopied to your clipboard
1function listboxChange(evt) {
2    const id = evt.target.options[evt.target.selectedIndex].getAttribute('row_id');
3    const value = evt.target.value;
4    // id will be null if if "row_id" isn't defined on the <sp-menu-item>
5    console log(`row_id is ${row_id} and value is ${value});
6}

Last updated 9/29/2021

Was this helpful?

Yes

No