Dropdown

A selection field. Its value is bindable, which is what makes it the usual driver of a screen: a dropdown selecting a line, with charts and detail panels bound to its value.

Reach for it when you need:

• Choosing which line or equipment the screen shows
• A field inside a Form

Component name: Dropdown · Category: Input

In the palette: Dropdown selection field

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
value	union	""	—
labelValue	union	""	—
options	array	[{"label":"Option 1","value":1},{"label":"Option 2","value":… (truncated)	—
placeholder	string	Select...	—
title	string	Select Option	—
showTitle	boolean	true	—
titleSize	number	13	—
multiple	boolean	false	—
showClear	boolean	true	—
shadow	boolean	true	Show a subtle drop-shadow on the dropdown trigger. Turn off for a flat look.
disabled	boolean	false	—
dropdownWidth	string	""	Width of the dropdown panel (e.g. 300, '400px'). Defaults to trigger width.
dropdownHeight	string	""	Max height of the dropdown panel (e.g. 300, '400px'). Defaults to 250px.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
change	Change	Input	The DOM event.
submit	Submit	Input	The DOM event.
focus	Focus	Input	The DOM event.
blur	Blur	Input	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Bind other components to this one with a property binding and the screen becomes interactive with no script at all.