Skip to main content

Select

The <sdpi-select> component provides a styled wrapper of <select>.

Example​

Property Inspector HTML
<sdpi-item label="Select">
<sdpi-select setting="color" placeholder="Please choose a color">
<optgroup label="Primary Colors">
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</optgroup>
<option value="#000000">Black</option>
<option value="#ffffff">White</option>
</sdpi-select>
</sdpi-item>

Result​

A select input in the Stream Deck property inspector using the sdpi-select web component

value

The value of <sdpi-select> can be represented as a boolean, number or string, based on the value-type; the default type is string.

{
"value": true | 1 | "one"
}

Configuration​

The component supports the following configuration.

NameTypeDescription
defaultstringThe default value; shown when the persisted value is undefined.
disabledbooleanDetermines whether the input is disabled.
placeholderstringOptional placeholder text shown in the input.
valueboolean, number, or stringThe value of the component, and the persisted setting.
value-type'boolean', 'number', or 'string'Optional, the preferred value type of the persisted setting; when 'boolean', 'false' and 0 will equate in false. Defaults to 'string'.

Data Source​

tip

Optionally, this components options can be loaded dynamically using the datasource attribute. When specified, this loads the options from the plugin, read more.

NameTypeDescription
datasourcestringThe optional remote data source.
hot-reloadbooleanWhen present, sendToPropertyInspector is actively monitored allowing for the plugin to update the items.
loadingstringWhen a datasource is specified, this text is shown whilst the items are loaded.
show-refreshbooleanWhen present, a refresh button is displayed next to the input.

Persistence​

The value of the component can be automatically persisted to the Stream Deck with the following configuration.

NameTypeDescription
globalbooleanWhen present, the value will be persisted to the global settings.
label-settingstringThe path of the property where the label should be persisted in the settings; when reloading, if the original value is not available, this label is rendered as a disabled option.
settingstringThe path of the property where the value should be persisted in the settings.
setting

The setting represents the path of a property. If required, this path can denote a nested property within the settings, e.g. if the setting were foo.bar.prop, the value would be saved to:

{
"foo": {
"bar": {
"prop": <value>
}
}
}