Component ComboBox

ComboBox

A text input combined with a dropdown of selectable options. As the user types, the dropdown filters; Enter picks the highlighted option. The text input is editable even after a pick, so it doubles as a search/filter UI.

The caller owns a Entity<ComboBoxState>.

Import

use yororen_ui::headless::combo_box::{combo_box, ComboBoxState, ComboBoxOption};

Minimal example

use yororen_ui::headless::combo_box::{combo_box, ComboBoxState, ComboBoxOption};
use gpui::Entity;

let combo_state: Entity<ComboBoxState> = cx.new(|cx| {
    let mut s = ComboBoxState::new(cx);
    s.set_options(vec![
        ComboBoxOption::new("rust", "Rust"),
        ComboBoxOption::new("python", "Python"),
    ]);
    s.set_placeholder("Pick a language…");
    s
});

combo_box("lang-picker", combo_state)
    .render(cx, window)

A typical lifecycle — set on_change so the caller learns about picks:

// In the parent view's `new`:
let combo_state = cx.new(|cx| {
    let mut s = ComboBoxState::new(cx);
    s.set_options(vec![
        ComboBoxOption::new("rust", "Rust"),
        ComboBoxOption::new("python", "Python"),
    ]);
    s.set_on_change({
        let entity = cx.entity();
        move |value: SharedString, _window, cx| {
            entity.update(cx, |s, _cx| s.language = value.to_string());
        }
    });
    s
});

Props (state methods on &Entity<ComboBoxState> via state.update(...) / state.read(...))

The headless combo_box(id, state) factory takes the id and the state entity. All runtime control flows through methods on the state. The methods shown below are the 6 most common; the full list is in the source.

Method	Purpose
new(app)	Mint a fresh state. Returns Entity<Self>.
open() / close() / toggle()	Show or hide the dropdown.
is_open() / is_visible()	Current state.
set_text(t)	Programmatically set the input text.
set_value(v)	Programmatically pick a value (also updates the text).
set_options(opts)	Replace the option list.
set_placeholder(p)	Hint shown when empty.
set_on_change(f)	Fn(SharedString, &mut Window, &mut App) + 'static + Send + Sync.
highlight(i) / highlight_next() / highlight_prev()	Move the highlighted option.
pick(value, w, cx)	Pick value (a SharedString). The value arg is mandatory — the renderer needs to know which option to fire.
select_highlighted(w, cx)	Pick whatever option is currently highlighted.

Notes

• Factory takes (id, state: Entity<ComboBoxState>). The id must be stable across re-renders so the TextInputCore state survives.
• .render(cx, window) is two-arg and returns AnyElement. The window is required because the trigger is a real text input.
• The state embeds a TextInputCore (the same shared caret/IME state used by text_input).
• Typing in the trigger opens the dropdown (the renderer hooks backspace/delete/paste/cut to reopen it).
• Enter picks the highlighted option; Escape closes (when dismiss_on_escape is true).
• set_options(...) takes a Vec<ComboBoxOption> (built with ComboBoxOption::new(value, label)), not Vec<SharedString>.

See also

Select, Listbox, TextInput, Form