8.18.1.44. Dropdown + select

Four shapes of pick-one-from-a-list. combo collapses choices into a dropdown popup; selectable stacks them as always-visible rows. combo_getter serves a procedural list from a lambda; selectable_label lets the caller own the selected-flag (so you can wire it through a list_box for single-select):

combo(IDENT, (text = "..", items <- ["A", "B", ...]))                       // dropdown, items array
combo_getter(IDENT, (text = "..", items_count = N,                          // dropdown, procedural list
                     getter = @(idx; var r : string&) : bool { ... }))
selectable(IDENT, (text = ".."))                                            // row, self-toggles
selectable_label(IDENT, text, selected, (flags = ...))                      // row, caller owns 'selected'

Source: modules/dasImgui/examples/tutorial/dropdown_select.das.

8.18.1.44.1. Walkthrough

options gen2
options _comment_hygiene = true

require math
require strings
require imgui
require imgui_app
require opengl/opengl_boost
require live/glfw_live
require live/live_api
require live/live_commands
require live/live_vars
require live_host
require imgui/imgui_live
require imgui/imgui_boost_runtime
require imgui/imgui_boost_v2
require imgui/imgui_widgets_builtin
require imgui/imgui_containers_builtin
require imgui/imgui_visual_aids

// =============================================================================
// TUTORIAL: dropdown_select — four shapes of pick-one-from-a-list.
//
//   combo(IDENT, (text = "..", items <- ["A", "B", ...]))
//     Items-array sugar — pass the strings, get a single-call dropdown.
//   combo_getter(IDENT, (text = "..", items_count = N,
//                        getter = @(idx; var result : string&) : bool { ... }))
//     Procedural list — the callback supplies row text on demand. Use when
//     items live in an unusual container (table, generator, large dataset).
//   selectable(IDENT, (text = "..", flags = ..., size = ...))
//     One row, self-toggles via ToggleState. Stack N to make a list.
//   selectable_label(IDENT, text, selected, (flags = ..., size = ...))
//     Row whose selected-look is driven by a CALLER-owned bool. Pair with
//     list_box (+ external index) when only one row may be active.
//
// STANDALONE: daslang.exe modules/dasImgui/examples/tutorial/dropdown_select.das
// LIVE:       daslang-live modules/dasImgui/examples/tutorial/dropdown_select.das
//
// DRIVE (when running live):
//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_FRUIT","value":2}}' \
//        localhost:9090/command
//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_FONT","value":1}}' \
//        localhost:9090/command
//   curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_SHIRT","value":3}}' \
//        localhost:9090/command
// =============================================================================

let FRUITS : array<string> <- ["Apple", "Banana", "Cherry", "Durian", "Elderberry"]
let FONTS  = fixed_array("Serif", "Sans", "Mono", "Cursive")
let TAGS   = fixed_array("urgent", "blocked", "review")
let SHIRTS = fixed_array("XS", "S", "M", "L", "XL", "XXL")

var private D_TAG    : table<int; ToggleState>
var private D_SHIRT_ROW : table<int; ClickState>

[export]
def init() {
    live_create_window("dasImgui dropdown_select tutorial", 760, 640)
    live_imgui_init(live_window)
    let io & = unsafe(GetIO())
    GetStyle().FontScaleMain = 1.4
}

[export]
def update() {
    if (!live_begin_frame()) return
    begin_frame()

    ImGui_ImplGlfw_NewFrame()
    apply_synth_io_override()
    NewFrame()

    SetNextWindowPos(ImVec2(20.0f, 20.0f), ImGuiCond.Always)
    SetNextWindowSize(ImVec2(720.0f, 600.0f), ImGuiCond.Always)
    window(DS_WIN, (text = "dropdown_select tutorial", closable = false,
                    flags = ImGuiWindowFlags.None)) {

        text("Four shapes of pick-one-from-a-list.")
        text(D_HINT, (text = "combo collapses; selectable rows stay open."))
        separator()

        // ---- Stage 1: combo — items as a string array ----
        combo(D_FRUIT, (text = "Fruit", items <- FRUITS))
        text("D_FRUIT.value = {D_FRUIT.value} ('{FRUITS[clamp(D_FRUIT.value, 0, length(FRUITS) - 1)]}')")
        spacing()

        // ---- Stage 2: combo_getter — callback supplies row text on demand ----
        combo_getter(D_FONT, (text = "Font", items_count = length(FONTS),
            getter = @(idx : int; var result : string&) : bool {
                if (idx >= 0 && idx < length(FONTS)) {
                    result = FONTS[idx]
                    return true
                }
                return false
            }))
        text("D_FONT.value = {D_FONT.value} ('{FONTS[clamp(D_FONT.value, 0, length(FONTS) - 1)]}')")
        spacing()

        // ---- Stage 3: selectable — N rows, each self-toggles independently ----
        text("Tags (multi-select - each row toggles its own ToggleState):")
        for (i in range(length(TAGS))) {
            selectable(D_TAG[i], (text = TAGS[i]))
        }
        text("active tags: {tags_summary()}")
        spacing()

        // ---- Stage 4: selectable_label inside list_box — single-select ----
        text("Shirt size (single-select - caller-owned int picks active row):")
        list_box(D_SHIRT, (text = "size", size = float2(0.0f, 0.0f))) {
            for (i in range(length(SHIRTS))) {
                let is_sel = (i == D_SHIRT.value)
                if (selectable_label(D_SHIRT_ROW[i], SHIRTS[i], is_sel)) {
                    D_SHIRT.value = i
                }
            }
        }
        text("D_SHIRT.value = {D_SHIRT.value} ('{SHIRTS[clamp(D_SHIRT.value, 0, length(SHIRTS) - 1)]}')")
    }

    end_of_frame()
    Render()
    var w, h : int
    live_get_framebuffer_size(w, h)
    glViewport(0, 0, w, h)
    glClearColor(0.10f, 0.10f, 0.12f, 1.0f)
    glClear(GL_COLOR_BUFFER_BIT)
    live_imgui_render()

    live_end_frame()
}

def tags_summary() : string {
    var first = true
    return build_string() $(var w : StringBuilderWriter) {
        for (i in range(length(TAGS))) {
            if (D_TAG[i].value) {
                if (!first) {
                    w |> write(", ")
                }
                w |> write(TAGS[i])
                first = false
            }
        }
        if (first) {
            w |> write("(none)")
        }
    }
}

[export]
def shutdown() {
    live_imgui_shutdown()
    live_destroy_window()
}

[export]
def main() {
    init()
    while (!exit_requested()) {
        update()
    }
    shutdown()
}

8.18.1.44.1.1. Requires

Already in the baseline boost layer:

imgui/imgui_widgets_builtin — combo / combo_getter / selectable / selectable_label rails.
imgui/imgui_containers_builtin — list_box block-arg container.
imgui/imgui_boost_runtime — ComboState / ToggleState / ClickState / ListBoxState state structs.

8.18.1.44.1.2. combo — items array

The simplest form. Pass the labels, get a dropdown; state.value is the chosen index.

combo(FRUIT, (text = "Fruit",
              items <- ["Apple", "Banana", "Cherry"]))
// FRUIT.value == 0 / 1 / 2

items is non-copyable (it’s a moved array<string>) — pass it inline with <-, or move from a local. Cap a long popup with popup_max_height_in_items = N to limit the scroller height.

8.18.1.44.1.3. combo_getter — procedural list

When labels don’t live in a flat array<string> (table-backed, generator-driven, computed on the fly), use the getter form. The callback returns one label per idx:

combo_getter(FONT, (text = "Font", items_count = length(FONTS),
    getter = @(idx : int; var result : string&) : bool {
        if (idx >= 0 && idx < length(FONTS)) {
            result = FONTS[idx]
            return true
        }
        return false
    }))

Return false for out-of-range indices — ImGui treats that as an empty row, useful for sparse lists. items_count is the upper bound the dropdown will probe.

8.18.1.44.1.4. selectable — multi-toggle rows

Each selectable owns its own ToggleState — rows toggle independently, which falls out as multi-select naturally:

var private TAG : table<int; ToggleState>
let TAGS = fixed_array("urgent", "blocked", "review")

for (i in range(length(TAGS))) {
    selectable(TAG[i], (text = TAGS[i]))
}
// any subset can be on at once — read TAG[i].value to filter.

The table<int; ToggleState> pattern is required for any indexed call (one IDENT, many rows). The state allocates lazily on first touch of each index.

8.18.1.44.1.5. selectable_label inside list_box — single-select

For one-of-N, switch to selectable_label with a caller-owned selected bool, wrapped in list_box (which adds the bordered frame + scroller). The list_box’s state.value holds the chosen index; the loop tags each row’s selected from it:

var private SHIRT_ROW : table<int; ClickState>
let SHIRTS = fixed_array("XS", "S", "M", "L", "XL", "XXL")

list_box(SHIRT, (text = "size", size = float2(0.0f, 0.0f))) {
    for (i in range(length(SHIRTS))) {
        let is_sel = (i == SHIRT.value)
        if (selectable_label(SHIRT_ROW[i], SHIRTS[i], is_sel)) {
            SHIRT.value = i
        }
    }
}

The ClickState rows carry only edge-trigger info — no per-row toggle persistence. The list_box’s state.value is the single source of truth, so imgui_force_set on the list_box target works the same as a combo.

8.18.1.44.1.6. Driving from outside

# combo / combo_getter — int value (the chosen index)
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_FRUIT","value":2}}' \
     localhost:9090/command
# list_box single-select — int value (the chosen row)
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_SHIRT","value":3}}' \
     localhost:9090/command
# selectable multi-select — bool per row (use the indexed IDENT)
curl -X POST -d '{"name":"imgui_force_set","args":{"target":"DS_WIN/D_TAG[0]","value":true}}' \
     localhost:9090/command

8.18.1.44.1.7. When to use which

combo — known list of choices, screen real estate matters. items is a one-liner.
combo_getter — list is procedural / huge / sparse. Same UX, callback-driven content.
selectable — multi-select. Rows always visible (no popup). Owns its own state per row.
selectable_label + list_box — single-select that needs to stay visible (sidebar, settings panel). The framed list_box is the always-visible counterpart to combo’s collapsing popup.

If a strip of 2-5 mutually exclusive options would fit inline, radio_button_int (Toggles) is lighter than a combo or list_box.