Edit in GitHubLog an issue

sp-dropdown

Since: UXP 4.1, PS 22.0.0

Renders a dropdown with menu items. The dropdown must contain a sp-menu with slot="options", and inside the sp-menu, a series of sp-menu-item or sp-menu-divider elements.

Dropdowns

See:

Example

Copied to your clipboard
1<sp-dropdown placeholder="Make a selection..." style="width: 320px">
2 <sp-menu slot="options">
3 <sp-menu-item> Deselect </sp-menu-item>
4 <sp-menu-item> Select inverse </sp-menu-item>
5 <sp-menu-item> Feather... </sp-menu-item>
6 <sp-menu-item> Select and mask... </sp-menu-item>
7 <sp-menu-divider></sp-menu-divider>
8 <sp-menu-item> Save selection </sp-menu-item>
9 <sp-menu-item disabled> Make work path </sp-menu-item>
10 </sp-menu>
11</sp-dropdown>

Variations#

Dropdowns come in several different variations.

Quiet#

Copied to your clipboard
<sp-dropdown quiet>...</sp-dropdown>

Disabled#

Copied to your clipboard
<sp-dropdown disabled>...</sp-dropdown>

Invalid#

Copied to your clipboard
<sp-dropdown invalid>...</sp-dropdown>

Responding to events#

You can respond to changes in the dropdown using the change event.

Copied to your clipboard
1document.querySelector(".yourDropdown").addEventListener("change", evt => {
2 console.log(`Selected item: ${evt.target.selectedIndex}`);
3})
Copyright © 2021 Adobe. All rights reserved.