# Drop-Down List (lv_dropdown) (/widgets/dropdown)
Overview [#overview]
A Drop-Down List lets the user pick a value from a list.
It is closed by default and shows a single value or a fixed label. When
the user clicks it, the list opens; after a pick, the list closes again.
A Drop-Down is added to the default group (if one is set). It is an
editable widget — items can also be selected with an encoder or a
keyboard.
List items [#list-items]
— items separated
by `\n`. The string is copied. Use `_set_options_static` to skip the copy
when the string lives in flash (cannot be combined with `_add_option`).
inserts at index `pos`.
picks the active option by index.
Get selected option [#get-selected-option]
* returns the index.
* copies the option text
into `buf`.
Direction [#direction]
chooses which side the list opens
toward (default ). Lists that would fall off the screen
are clamped to the edge automatically.
Symbol [#symbol]
Add an indicator glyph (typically an arrow) with .
It's rendered on the right by default; on the left when direction is
.
```c title=" " lineNumbers=1
lv_dropdown_set_symbol(dropdown, LV_SYMBOL_DOWN);
```
Show selected [#show-selected]
By default the button shows the selected option. Set a fixed label with
(or `_set_text_static`) and the button
shows that string regardless of selection. Pass `NULL` to revert.
Set translation tag [#set-translation-tag]
When using LVGL's [translation module](/main-modules/translation), you can bind a translation tag to a drop-down list directly.
After binding, future changes to the language will automatically update the bound text or options to
display the corresponding translation for that tag in the new language.
* binds the
button's fixed text (see [Show selected](#show-selected)).
* binds the
options. The translation should contain the options in a `\n` separated list, e.g. `"One\nTwo\nThree"`.
Calling any of the regular `lv_dropdown_set_text…`/`lv_dropdown_set_options…` functions (or
`lv_dropdown_add_option`/`lv_dropdown_clear_options`) afterwards removes the binding.
Programmatically open/close [#programmatically-openclose]
and .
Styling [#styling]
The widget has two parts: the **button** (opens the list when clicked)
and the **list** (shown while open). Each part has its own selectors:
**Button**
* — background + text of the closed button. Picks up
while the list is open.
* — the symbol set with .
**List** (accessed via )
* — list background. `max_height` caps the open list size.
* — scrollbar.
* — the highlighted/pressed option:
* — used for the currently active option
* — used for the option is being pressed by touch or
the Enter key is being pressed
To restyle the list, just get it, and add a style:
```c title=" " lineNumbers=1
lv_obj_t * list = lv_dropdown_get_list(dd);
lv_obj_add_style(list, &my_style, LV_PART_SELECTED);
```
Data binding [#data-binding]
Data bindings connect a widget property to a piece of global data — a
[Subject](/main-modules/data_binding/subjects). When the subject's value
changes, every widget bound to it updates automatically; and an
interactive widget can write back into the subject so other subscribers
see the new value.
A Drop-Down binds its selected index to a Subject. The link is two-way:
picking an option updates the subject, and an application-side write into
the subject moves the selection. Only integer subjects are supported.
*
To show the value live in a label next to the widget, attach a label and call — the format string accepts any printf-style specifier (XML: `bind_text` + `bind_text-fmt`).
Events [#events]
* Sent when a new option is selected or the list is opened/closed.
* Sent when list is closed.
* Sent when list is opened.
Learn more about [Events](/common-widget-features/events) emitted by all Widgets.
Keys [#keys]
* `LV_KEY_RIGHT/DOWN` Select next list item.
* `LV_KEY_LEFT/UP` Select previous list item.
* Apply selected list item (sends
event and closes Drop-Down List).
Learn more about [Keys](/main-modules/indev/keypad).