UXP Spectrum picker: Label position not working as expected

Photoshop UXP Plugin API
1

I’m developing a Photoshop plugin with the following settings in the spec file:

 "manifestVersion": 5,
  "host": {
    "app": "PS",
    "minVersion": "23.3.0",
    "data": {
      "apiVersion": 2
    }
  },

I have the following code:

 <sp-picker size="s" class={styles.dropdown}>
    <sp-label slot="label">Foo</sp-label>
    <sp-menu slot="options">
      {Options.map((item, idx) => (
        <sp-menu-item selected={arValue === item ? 'selected' : undefined} value={item} key={idx}>
          {item}
        </sp-menu-item>
      ))}
    </sp-menu>
  </sp-picker>

I want the label “Foo” to be positioned next to the dropdown, rather than at the top of it. However, I’ve tried various variations based on the Spectrum docs, but none of them have worked.

According to the Spectrum documentation, there should be an option for “label position” with values “top” or “side”. However, I couldn’t get it to work despite trying different variations.

You can refer to the Spectrum documentation for more details on the picker component: https://spectrum.adobe.com/page/picker/

Please note that the issue might be related to a specific version or implementation of the Spectrum library. It would be helpful to consult the library’s documentation or seek support from the Spectrum community for further assistance.

2

I don’t think it’s supported in UXP Spectrum. You could try SWC beta, but it seems picker is not supported there at all. Maybe you’ll find something in the countless other related posts in the forum

1 Like
3

Very late to the party, but you can wrap the label and the element that you want it associated with inside an sp-field-group

<sp-field-group style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center">