How to set default value in sp-picker

[ashwin_0502]

Hello sir,

How can I set a default value for <sp-picker> in UXP ? It renders and works fine, but I need the picker to show a pre-selected value on load.

[Eugene Tyson]

Hi @ashwin_0502,

Not sure if you've figured this one out - but trying to learn myself.

Can you set a default value in <sp-picker> by passing a value that matches one of your <sp-menu-item> entries?

For example:

<sp-picker value="b">
<sp-menu-item value="a">Option A</sp-menu-item>
<sp-menu-item value="b">Option B</sp-menu-item>
<sp-menu-item value="c">Option C</sp-menu-item>
</sp-picker>

In this case, Option B will be selected when the picker loads because its value matches the picker’s value attribute.

Maybe if you’re updating it dynamically in UXP/JS, you could also set it in a script?

const picker = document.querySelector("sp-picker");
picker.value = "b";

Would this give the preselected value?