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)	—
↳ options.label	string	New Option	—
↳ options.value	union	""	—
placeholder	string	Select...	—
title	string	Select Option	—
showTitle	boolean	true	—
titleSize	number	0	Title font size (px). 0 = follows the size. 1.0.8
size	enum	inherit	Field height, padding, text and title size. Project default = the project's Control size (Project settings → Theme). Use md or larger on touch panels. Options: inherit · xs · sm · md · lg · xl. 1.0.8
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.

The size reaches every part of it — the trigger, the search box, the option rows and the chips of a multi-select, including the list, which opens outside the widget. The trigger keeps the field height rather than stretching to fill a taller widget box, so it lines up with an Input beside it. Changed in 1.0.8

Size New in 1.0.8

size sets the field's height, padding, text and title on one scale shared by every field widget:

size	xs	sm	md	lg	xl
Field height	28 px	36 px	44 px	52 px	64 px
Text	12 px	13 px	14 px	16 px	18 px

The default, Project default (inherit), follows the project's Control size (Project settings → Theme), so one setting resizes every field on every screen. Set size on a widget only where it has to differ. A field, a dropdown and a button at the same size line up exactly, side by side.

titleSize now defaults to 0, which follows the size. A number you set still wins.

Fields, buttons and menus draw smaller after upgrading to 1.0.8

Before 1.0.8 these widgets had one size, what is now md (a 44 px field). The project's Control size defaults to sm (36 px), sized for desktop dashboards, and every widget whose size is Project default follows it — which is every widget in an upgraded project. On a touch panel, set Project settings → Theme → Control size to md or larger: 44 px is the touch-target minimum.