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),
}
with search
{
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
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.
search?
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
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
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?