Component Select

Select

A dropdown trigger that picks exactly one option from a list. Trigger is not editable — use ComboBox when you need search-as-you-type.

use yororen_ui::headless::select::{select, SelectOption, SelectState};

let select_state = SelectState::new(&mut **cx);
select_state.update(cx, |s, _| {
    s.set_options(vec![
        SelectOption::new("light", "Light"),
        SelectOption::new("dark",  "Dark"),
        SelectOption::new("system", "System"),
    ]);
    s.set_placeholder("Theme…");
    s.set_on_change({
        let entity = cx.entity();
        move |value, _, cx| entity.update(cx, |s, _| s.theme = value.to_string());
    });
});

select("theme-picker", select_state).render(cx)

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_value(v)	Programmatically pick a value.
set_options(opts)	Replace the option list.
set_placeholder(p)	Hint shown when no value is picked.
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) is one-arg and returns Stateful<Div>. set_options(...) takes Vec<SelectOption> (built with SelectOption::new(value, label)); disable an option with .disabled(true).

See also: ComboBox, Listbox, RadioGroup.