UISelectElement


Represents a select element in a panel.

Remarks

options property is required. label property is displayed above the select and used for screen readers. value property is optional, for empty value use undefined. placeholder property is displayed in the select when no value is selected. search property is used to enable searching through the options. onChange property is used to handle the value change event.

Examples

empty select

{
  type: "Select",
  options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }],
  value: undefined,
  placeholder: "Select an option",
  onChange: (args) => console.log(args.value),
}

with label

label is displayed above the select and used for screen readers. placeholder is displayed in the select when no value is selected.

{
  type: "Select",
  label: "Fruit",
  options: [{ label: "Apple", value: "apple" }, { label: "Banana", value: "banana" }],
  value: undefined,
  placeholder: "Select a fruit",
  onChange: (args) => console.log(args.value),
}
{
  type: "Select",
  options: [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }],
  value: "option1",
  placeholder: "Select an option",
  search: true,
  onChange: (args) => console.log(args.value),
}

Properties

type

type: "Select"


options

options: UIControlElementOption[]

The options to display in the select.


onChange()

onChange: (args: { value: string; id: string; }) => void

The function to call when the value of the select changes.

Parameters

Parameter
Type
Description

args

{ value: string; id: string; }

The arguments passed to the function.

args.value

string

The value of the select.

args.id

string

The id of the select element.

Returns

void


id

id: string

The ID of the element.


value?

optional value: string

The value of the select.


placeholder?

optional placeholder: string

The placeholder text to display in the select.


optional search: boolean

Whether the select should allow searching through the options.

Default Value

false


onCreate()?

optional onCreate: (args: { id: string; }) => void

A function to call when the element is created.

Parameters

Parameter
Type
Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void


onDestroy()?

optional onDestroy: (args: { id: string; }) => void

A function to call when the element is destroyed.

Parameters

Parameter
Type
Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void


label?

optional label: string

Label text to display above the element and used for screen readers.

Last updated

Was this helpful?