Component ComboBox

ComboBox

A searchable dropdown.

Use this when you have a large list of options and want inline filtering.

ComboBox maintains its own “menu open” state and its own search query state.

Example

use gpui::ElementId;
use yororen_ui::component::{combo_box, ComboBoxOption};

let view = combo_box()
    .key(ElementId::from(("settings", "channel")))
    .placeholder("Select a channel…")
    .options([
        ComboBoxOption::new("stable", "Stable"),
        ComboBoxOption::new("beta", "Beta"),
        ComboBoxOption::new("nightly", "Nightly"),
    ])
    .on_change(|value, _ev, _window, _cx| {
        // value: String
    });

When to use

• Large option sets where users benefit from searching/filtering
• “Command palette”-like selection of a known set of items

Not a good fit:

• Small option sets (use Select)

API

• combo_box(): constructor
• id(...) / key(...): stable identity
• options([...]) / option(ComboBoxOption): provide options
• ComboBoxOption::new(value, label) + .disabled(true)
• value(String): set current selected value (when controlled)
• placeholder("...")
• localized(): use i18n placeholders (see Internationalization)
• disabled(bool)
• max_results(usize): cap filtered results (default: 12)
• menu_width(px(...)): explicit menu width
• on_change(|value, ev, window, cx| ...): change handler with event, window and app context
• on_change_simple(|value| ...): simplified handler that only receives the value
• Styling: bg/border/focus_border/text_color/height

Interaction and behavior

• Menu open state is internal (ui:combo-box:open). Clicking the control toggles it.
• Search query is stored in an internal TextInputState (ui:combo-box:query).
• Filtering matches both label and value (case-insensitive).
• Clicking outside closes the menu.

Defaults

• Height: 36px
• Placeholder: "Select…"
• Default menu width: 420px if menu_width is not provided
• Max results: 12
• If you omit on_change, on_change_simple, and value, ComboBox owns an internal selected value.

Notes

• If you need full keyboard navigation across a huge dataset, you may want a widget-layer solution.

Example: Limit results + menu width

use gpui::{ElementId, px};
use yororen_ui::component::{combo_box, ComboBoxOption};

let view = combo_box()
    .key(ElementId::from(("settings", "server")))
    .menu_width(px(360.))
    .max_results(8)
    .options([
        ComboBoxOption::new("a", "Alpha"),
        ComboBoxOption::new("b", "Beta"),
    ]);