Documentation / Widgets / Controller / Dropdown

Dropdown

A closed list that opens on tap. The list is a separate object in LVGL, which is why it has its own three style parts.

Group: Controller · Default size: 150 × 40 · Style parts: Main, Indicator, List main, List scrollbar, List selected

A dropped Dropdown: a white box saying Option 1 with a down arrow.
A Dropdown as it is dropped, closed.
The Dropdown settings section: Options, List align, Selected, Show selected, Base text, Symbol, Maximum Height and To be translated.
Its settings.
SettingDefaultWhat it does
OptionsOption 1 / 2 / 3One per line.
List alignBottomWhich way the list opens.
Selected0Initial index, from zero.
Show selectedonWhether the closed control shows the current option.
Base text(empty)Fixed text to show instead of the selected option - a prompt such as "Choose".
Maximum Height0Caps the open list, which scrolls past it. 0 leaves LVGL’s own limit, about 260 px.

Example: choosing a fan speed

  1. On the Data tab add an Integer variable called fan, with Min 0 and Max 3.
  2. Drag a Dropdown onto the screen and name it FanSpeed. Set Options to four lines: Off, Low, Medium and High. Bind it: Variable fan, Drives Selected, Direction Both ways. Selected counts from 0, so Off is 0 and High is 3.
  3. Drag a Bar under it, set Bar settings > Max to 3, and bind its Value to fan.
  4. Press Preview and click the dropdown twice. Preview steps to the next option on each click rather than opening the list: at Medium the bar is two thirds full.
Preview: the dropdown showing Medium, and under it a bar filled two thirds.
Medium chosen: the bar follows.
The dropdown's Data bindings: Variable fan, Drives Selected, Direction Both ways.
The chosen option’s number goes into fan.