Component ComboBox

ComboBox

A text input combined with a dropdown. As the user types, options filter; Enter picks the highlighted one. The trigger stays editable after a pick.

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

let combo_state = ComboBoxState::new(&mut **cx);
combo_state.update(cx, |s, _| {
    s.set_options(vec![
        ComboBoxOption::new("rust",   "Rust"),
        ComboBoxOption::new("python", "Python"),
    ]);
    s.set_placeholder("Pick a language…");
    s.set_on_change({
        let entity = cx.entity();
        move |value, _, cx| entity.update(cx, |s, _| s.language = value.to_string());
    });
});

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

State methods

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); closes + fires on_change.
select_highlighted(w, cx)	Pick the currently highlighted option.

.render(cx, window) is two-arg and returns AnyElement (the trigger is a real text input). Typing in the trigger opens the dropdown. set_options(...) takes Vec<ComboBoxOption>.

See also: Select, Listbox, TextInput.