Native hotkey component in custom plugin?

[Nyiax]

I'm developing my own plugin and have buttons that have custom logic and I'm wanting to include a hotkey option in the button configuration. The native hotkey functionality in the default Hotkey button is exactly what I'd like to implement but I don't see it as an SDPI component option like lists, radio buttons, etc. Is there a way to implement that native hotkey function in a custom plugin? Thanks!

[skysteve]

I suspect you'd need to roll your own. It's all just Javascript/HTML. The SDPI components are partly convenience & partly for consistent look/feel.

I wanted a toggle for something so had to roll my own (looks nicer than radios). The code below creates a hidden radio button group to do all the settings loading/saving for me and then a little bit of JS to handle value changes and update accordingly. (the <toggle-switch> component is an HTML custom element but you could just use a regular input box + listen to keyboard events

<sdpi-item label="Control">
  <label class="toggle-label"
    >Device only &nbsp;
    <toggle-switch id="toggle-device-group"></toggle-switch>&nbsp; Group</label
  >
  <sdpi-radio
    setting="controlGroup"
    columns="2"
    value-type="boolean"
    default="0"
    style="display: none"
    id="sdpi-device-group"
  >
    <option value="0" id="opt-0">Device only</option>
    <option value="1" id="opt-1">Group</option>
  </sdpi-radio>
  <script>
    const toggleDeviceGroup = document.getElementById("toggle-device-group");
    const controlGroup = document.getElementById("sdpi-device-group");

    toggleDeviceGroup.addEventListener("toggle-switch:change", (e) => {
      controlGroup.value = e.target.checked ? "1" : "0";
    });
  </script>
</sdpi-item>

Took me a little while to figure out how to set the value back on the element, I tried all sort of .setAttribute('value') , .dispatchEvent(...) but just setting the value as above works.

Hope that helps!